
:root{
  --brand:#0b4ea2;
  --brand-dark:#083a78;
  --gold:#f2c200;
  --border:#d9e2ef;
  --text:#0f172a;
  --muted:#475569;
  --bg:#f6f8fb;
  --danger:#b42318;
  --success:#067647;
}
*{box-sizing:border-box;}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text);} 
.container{max-width:1120px;margin:0 auto;padding:0 28px;}
.header{position:sticky;top:0;background:white;border-bottom:1px solid var(--border);z-index:50;} 
/* Gold stripe requested: 6–8px. Using 8px */
.header::before{content:"";display:block;height:6px;background:linear-gradient(90deg,var(--gold),var(--brand),var(--brand-dark));}
.nav{display:flex;gap:18px;align-items:center;padding:14px 0;}
.brand{display:flex;gap:12px;align-items:center;min-width:260px;}
.brand img{height:46px;width:auto;display:block;}
.brand strong{font-size:18px;}
.sub{display:block;color:var(--muted);font-size:12px;margin-top:2px;}
.navlinks{margin-left:auto;display:flex;gap:18px;align-items:center;flex-wrap:wrap;}
.navlinks a{color:var(--muted);text-decoration:none;font-weight:600;padding:8px 10px;border-radius:8px;}
.navlinks a:hover{background:rgba(11,78,162,0.08);color:var(--brand-dark);} 
.navlinks a[aria-current="page"]{color:var(--brand-dark);background:rgba(11,78,162,0.10);}
.hero{padding:44px 0;}
.heroCard{background:white;border:1px solid var(--border);border-radius:14px;padding:34px;box-shadow:0 10px 30px rgba(15,23,42,0.08);} 
.heroCard h1{margin:0 0 12px;font-size:36px;line-height:1.15;}
.heroCard p{margin:0 0 18px;color:var(--muted);max-width:70ch;}
.btn{padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:700;margin-right:10px;display:inline-block;border:1px solid transparent;cursor:pointer}
.btn.primary{background:var(--brand);color:white;}
.btn.primary:hover{background:var(--brand-dark);} 
.btn.accent{background:linear-gradient(180deg, rgba(242,194,0,0.34), rgba(242,194,0,0.18));color:#3b2f00;border-color:rgba(242,194,0,0.55);} 
.btn.accent:hover{border-color:rgba(242,194,0,0.75);} 
.section{padding:10px 0 46px;}
.section h2{margin:0 0 10px;font-size:22px;}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.card{background:white;border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:0 10px 26px rgba(15,23,42,0.06);} 
.card h3{margin:0 0 8px;font-size:16px;color:var(--brand-dark);} 
.card p{margin:0;color:var(--muted);} 
.pageHead{padding:30px 0 10px;}
.pageHead h1{margin:0 0 8px;font-size:30px;}
.pageHead p{margin:0;color:var(--muted);max-width:75ch;}
.form{background:white;border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:0 10px 26px rgba(15,23,42,0.06);max-width:760px;}
.field{display:grid;gap:6px;margin-bottom:12px;}
label{font-weight:700;}
input, textarea{font:inherit;padding:11px 12px;border-radius:10px;border:1px solid var(--border);background:white;}
textarea{min-height:140px;resize:vertical;}
.help{font-size:13px;color:var(--muted);margin-top:4px;}
.alert{margin-top:14px;padding:12px 12px;border-radius:12px;border:1px solid var(--border);background:#fff;}
.alert.success{border-color:rgba(6,118,71,0.25);background:rgba(6,118,71,0.06);color:var(--success);}
.alert.error{border-color:rgba(180,35,24,0.25);background:rgba(180,35,24,0.06);color:var(--danger);}
.footer{padding:22px 0 30px;color:var(--muted);font-size:14px;border-top:1px solid var(--border);background:white;}
@media(max-width:900px){
  .container{padding:0 16px;}
  .grid{grid-template-columns:1fr;}
  .heroCard h1{font-size:30px;}
  .nav{flex-wrap:wrap;}
  .brand{min-width:auto;}
}

#members-container {
    display: flex;
    width: 100%;
    min-height: 600px;
}

#subnav {
    width: 260px;
    background: #f2f2f2;
    padding: 20px;
    border-right: 1px solid #ccc;
}

#subnav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#subnav li {
    margin-bottom: 10px;
}

#subnav a {
    text-decoration: none;
    color: #003366;
    font-weight: 600;
}

#subnav a:hover {
    text-decoration: underline;
}

#member-content {
    flex-grow: 1;
    padding: 0;
}

#member-content iframe {
    width: 100%;
    height: 100%;
    border: none;
    min-height: 600px;
}
