
  :root{
    --ink:#0F2A4D;
    --ink-soft:#526078;
    --paper:#F4F6FA;
    --paper-raised:#FFFFFF;
    --brand:#1A56A3;
    --brand-deep:#0D3D7A;
    --brand-tint:#E9EFF9;
    --brass:#C6952F;
    --brass-deep:#9C7223;
    --rule:#DCE3EE;
    --rule-strong:#BFCBE0;
    --white:#FFFFFF;
    --font-display:'Times New Roman', Times, Georgia, serif;
    --font-body:'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-mono:'Helvetica Neue', Helvetica, Arial, sans-serif;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--font-body);
    background:var(--paper);
    color:var(--ink);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 40px;}
  img{display:block; max-width:100%;}
  .utility-row{padding:8px 40px;} /* restore shared header.js utility-bar padding (loaded after layout.css) */

  /* Common Sections */
  section{padding:80px 0; position:relative;}
  .section-head{margin-bottom:44px; border-bottom:1px solid var(--rule); padding-bottom:22px;}
  .section-kicker{font-size:12px; font-family:var(--font-mono); color:var(--brass-deep); letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px; display:flex; align-items:center; gap:8px; font-weight:600;}
  .section-kicker::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--brass-deep); display:inline-block;}
  .section-title{font-family:var(--font-display); font-weight:500; font-size:35px; line-height:1.2; letter-spacing:-.01em; color:var(--ink);}
  .section-sub{font-size:15px; color:var(--ink-soft); max-width:640px; margin-top:10px; line-height:1.6;}

  /* =========================================================
     HERO SECTION (same visual system as About / Contact pages)
     ========================================================= */
  .about-hero{
    position:relative; background:var(--ink); color:var(--paper); padding:84px 0 70px;
    overflow:hidden; isolation:isolate;
  }
  .hero-banner-bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
  .hero-banner-img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
    opacity:.5; filter:contrast(1.1); transform:scale(1.02);
    animation:heroImageDrift 30s ease-in-out infinite alternate;
  }
  @keyframes heroImageDrift{
    0%{transform:scale(1.02) translate(0,0);}
    100%{transform:scale(1.08) translate(-1%, -1%);}
  }
  .hero-overlay{
    position:absolute; inset:0; z-index:-1;
    background:linear-gradient(135deg, rgba(12,32,60,0.8) 0%, rgba(13,50,98,0.68) 55%, rgba(10,28,52,0.82) 100%),
               radial-gradient(ellipse at 80% 30%, rgba(198,149,47,0.18) 0%, transparent 60%);
  }
  .hero-grid-mesh{
    position:absolute; inset:0; z-index:-1; opacity:0.1;
    background-image:linear-gradient(rgba(255,255,255,0.15) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(255,255,255,0.15) 1px, transparent 1px);
    background-size:48px 48px;
  }
  .about-hero .wrap{position:relative; z-index:1;}
  .hero-plain-kicker{display:flex; align-items:center; gap:10px; font-size:12.5px; font-family:var(--font-mono); color:#9FB0C9; letter-spacing:.1em; text-transform:uppercase; margin-bottom:18px; font-weight:600;}
  /* .hero-plain-kicker::before{content:''; width:20px; height:1px; background:#9FB0C9;} */
  .about-hero h1{font-family:var(--font-display); font-size:42px; font-weight:500; line-height:1.22; letter-spacing:-.01em; max-width:640px; margin-bottom:18px;}
  .about-hero h1 span.accent{color:#E7C889; font-style:italic;}
  .hero-subhead{font-size:16px; color:#C4CCDD; line-height:1.7; max-width:600px;}

  /* =========================================================
     MEMBERSHIP DOCUMENTS LIST
     ========================================================= */
  .section-membership-docs{background:var(--paper); padding:64px 0 84px;}
  .membership-doclist{
    background:var(--paper-raised); border:1px solid var(--rule); border-radius:10px;
    overflow:hidden; box-shadow:0 8px 24px -10px rgba(15,42,77,0.08);
  }
  .doc-row{
    display:flex; align-items:center; gap:18px; padding:20px 26px;
    border-bottom:1px solid var(--rule); transition:background .15s ease;
  }
  .doc-row:last-child{border-bottom:none;}
  .doc-row:hover{background:var(--paper);}
  .doc-icon{
    position:relative; flex:0 0 auto; width:44px; height:44px; border-radius:10px;
    background:#FFF3F3; border:1px solid #FBD8D8;
    display:flex; align-items:center; justify-content:center; color:#D6413A;
  }
  .doc-icon-tag{
    position:absolute; left:50%; bottom:3px; transform:translateX(-50%);
    background:#E02424; color:#fff; font-size:8px; font-weight:800; letter-spacing:.03em;
    padding:1.5px 5px; border-radius:3px; box-shadow:0 1px 3px rgba(224,36,36,.4);
  }
  .doc-icon-link{background:var(--brand-tint); border-color:rgba(26,86,163,0.22); color:var(--brand-deep);}
  .doc-info{flex:1; min-width:0;}
  .doc-info h4{font-family:var(--font-display); font-size:15.5px; font-weight:600; color:var(--ink); margin-bottom:5px; line-height:1.3;}
  .doc-meta{display:flex; align-items:center; gap:6px; font-size:12px; font-family:var(--font-mono); color:var(--ink-soft);}
  .doc-actions{flex:0 0 auto; display:flex; align-items:center; gap:18px;}
  .doc-download{display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--brass-deep); white-space:nowrap;}
  .doc-chevron{color:var(--rule-strong); display:flex; transition:transform .2s ease, color .2s ease;}
  .doc-row:hover .doc-chevron{color:var(--brass-deep); transform:translateX(3px);}

  @media (max-width:900px){
    .section-membership-docs{padding:52px 0 64px;}
  }

  /* =========================================================
     RESPONSIVE — section by section, down to 320px
     ========================================================= */
  @media (max-width:980px){
    .wrap{padding:0 28px;}
    .utility-row{padding:8px 22px; flex-wrap:wrap; justify-content:center; row-gap:8px;}
    .utility-links{flex-wrap:wrap; justify-content:center; row-gap:8px;}
    section{padding:56px 0;}
    .about-hero{padding:60px 0 50px;}
    .about-hero h1{font-size:34px;}
    .hero-subhead{font-size:15px;}
    .section-title{font-size:28px;}
  }
  @media (max-width:640px){
    .wrap{padding:0 20px;}
    .utility-row{padding:8px 18px;}
    .utility-btn{padding:6px 12px; font-size:11px;}
    .header-actions{gap:10px;}
    section{padding:44px 0;}
    .section-head{margin-bottom:30px; padding-bottom:18px;}

    .about-hero{padding:48px 0 40px;}
    .about-hero h1{font-size:27px;}
    .hero-plain-kicker{font-size:11.5px;}
    .hero-subhead{font-size:14.5px;}

    .section-title{font-size:23px;}
    .section-sub{font-size:14px;}

    .doc-row{padding:16px 18px; gap:14px;}
    .doc-icon{width:40px; height:40px;}
    .doc-info h4{font-size:14.5px;}
    .doc-actions{gap:12px;}
    .doc-download span{display:none;}

    .newsletter .wrap{flex-direction:column; align-items:stretch; text-align:center; gap:14px; padding:30px 20px;}
    .newsletter-form{flex-direction:column;}
    .newsletter-form input{width:100%;}
  }
  @media (max-width:480px){
    .about-hero h1{font-size:23px;}
    .hero-subhead{font-size:14px;}
    .section-title{font-size:20px;}
    .section-kicker{font-size:11px;}

    .doc-row{padding:14px 14px; gap:12px;}
    .doc-icon{width:36px; height:36px;}
    .doc-icon-tag{font-size:7px; padding:1px 4px;}
    .doc-info h4{font-size:13.5px;}
    .doc-meta{font-size:11px;}
    .doc-actions{gap:8px;}
  }
  @media (max-width:380px){
    .wrap{padding:0 16px;}
    .utility-row{padding:8px 14px;}
    .utility-btn{padding:5px 10px; font-size:10.5px;}
    .logo-img{height:32px;}
    section{padding:36px 0;}

    .about-hero h1{font-size:20.5px;}
    .hero-plain-kicker{font-size:11px;}
    .section-title{font-size:18.5px;}
    .section-sub{font-size:13.5px;}

    .doc-row{padding:12px 12px;}
    .doc-info h4{font-size:13px;}
  }

  /* Newsletter strip (shared across pages) */
  .newsletter{background:var(--ink); color:var(--paper); border-top:1px solid #26315233;}
  .newsletter .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; padding:44px 40px;}
  .newsletter h3{font-family:var(--font-display); font-size:22px; font-weight:500;}
  .newsletter p{font-size:13.5px; color:#98A0B4; margin-top:6px;}
  .newsletter-form{display:flex; gap:10px;}
  .newsletter-form input{background:transparent; border:1px solid #3A4560; color:var(--paper); font-size:14px; padding:12px 16px; width:250px; border-radius:3px; transition:border-color .2s ease, box-shadow .2s ease;}
  .newsletter-form input::placeholder{color:#6E7891;}
  .newsletter-form input:focus{outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(198,149,47,.18);}
  .newsletter-form button{background:var(--brass); color:var(--ink); font-weight:600; font-size:13.5px; padding:12px 22px; border-radius:3px; border:none; cursor:pointer; transition:transform .2s ease, background .2s ease, box-shadow .2s ease;}
  .newsletter-form button:hover{transform:translateY(-2px); box-shadow:0 12px 26px -12px rgba(198,149,47,.6);}
