:root{
    --navy:#0F2B42;
    --forest:#294E46;
    --gold:#AA8652;
    --stone:#C6BDB2;
    --charcoal:#4F4F4F;
    --white:#FFFFFF;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }

  html{ scroll-behavior:smooth; height:100%; }

  body{
    font-family:'Inter', sans-serif;
    color:var(--charcoal);
    line-height:1.65;
    background:var(--white);
    min-height:100%;
    display:flex;
    flex-direction:column;
  }

  main{ flex:1 0 auto; }

  h1,h2,h3{
    font-family:'Source Serif 4', serif;
    color:var(--navy);
    line-height:1.25;
  }

  h1{ font-size:2.75rem; font-weight:700; }
  h2{ font-size:2rem; font-weight:600; margin-bottom:1.25rem; }
  h3{ font-size:1.3rem; font-weight:600; }

  p{ margin-bottom:1rem; }

  a{ color:inherit; text-decoration:none; }

  .eyebrow{
    font-family:'Inter', sans-serif;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--gold);
    font-size:.8rem;
    margin-bottom:.5rem;
    display:block;
  }

  /* ---------- NAV ---------- */
  nav{
    position:sticky; top:0; z-index:100;
    background:var(--navy);
    display:flex; align-items:center; justify-content:space-between;
    padding:1.25rem 2rem;
  }

  .logo{
    display:inline-flex;
    align-items:center;
    font-family:'Source Serif 4', serif;
    font-weight:600;
    font-size:1.5rem;
    color:var(--white);
    letter-spacing:.03em;
  }
  .site-logo{ display:block; width:clamp(145px,16vw,205px); height:auto; }
  .logo span{ color:var(--gold); }

  .nav-links{
    display:flex;
    align-items:center;
    gap:2rem;
    list-style:none;
    margin-left:auto;
  }

  .nav-links a{
    color:var(--stone);
    font-weight:500;
    font-size:1.05rem;
    transition:color .2s;
  }
  .nav-links a:hover{ color:var(--gold); }

  .nav-actions{
    display:flex;
    align-items:center;
    margin-left:1.5rem;
    gap:.65rem;
  }

  .nav-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:44px;
    background:var(--gold);
    color:var(--navy);
    padding:0 1.35rem;
    border-radius:4px;
    font-weight:700;
    line-height:1;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
    box-shadow:0 8px 18px rgba(170,134,82,.22);
  }

  .nav-actions .nav-btn{
    color:var(--navy);
    font-size:1.05rem;
    font-weight:700;
  }

  .nav-btn:hover{
    background:#c79d5b;
    color:var(--navy);
    transform:translateY(-2px);
    box-shadow:0 12px 24px rgba(170,134,82,.28);
  }

  .nav-actions .nav-btn:hover{
    background:#c79d5b;
    color:#0F2B42;
  }

  .nav-btn::after{ display:none; }

  .nav-toggle{
    display:none;
    flex-direction:column;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
  }
  .nav-toggle span{
    width:24px; height:2px; background:var(--white);
  }

  /* Keep the two action buttons visible while the page links move into the
     hamburger menu on tablet-sized layouts such as 850px wide. */
  @media (max-width:900px){
    .nav-links{
      position:absolute;
      top:100%; left:0; right:0;
      background:var(--navy);
      flex-direction:column;
      padding:1rem 2rem;
      display:none;
      gap:1rem;
      margin-left:0;
    }
    .nav-links.open{ display:flex; }
    .nav-actions{
      margin-left:auto;
      margin-right:.75rem;
    }
    .nav-toggle{ display:flex; }
  }

  @media (max-width:590px){
    nav{ padding:1rem; }
    .site-logo{ width:120px; }
    .nav-actions{ margin-right:.4rem; }
    .nav-actions .nav-btn{
      height:34px;
      padding:0 .5rem;
      font-size:.72rem;
      white-space:nowrap;
    }
  }

  @media (max-width:400px){
    .site-logo{ width:105px; }
    .nav-actions{ gap:.35rem; }
    .nav-actions .nav-btn{
      height:30px;
      padding:0 .4rem;
      font-size:.62rem;
    }
  }

  @media (max-width:350px){
    .site-logo{ width:95px; }
    .nav-actions{ gap:.3rem; }
    .nav-actions .nav-btn{
      height:25px;
      padding:0 .3rem;
      font-size:.52rem;
    }
  }
  
  /* ---------- HERO ---------- */
  .hero{
    background:linear-gradient(150deg, var(--navy) 60%, var(--forest) 100%);
    color:var(--white);
    padding:6rem 2rem;
    text-align:center;
  }
  .hero h1{ color:var(--white); max-width:800px; margin:0 auto 1.5rem; }
  .hero p{
    max-width:600px; margin:0 auto;
    color:var(--stone);
    font-size:1.15rem;
  }

  /* ---------- SECTIONS ---------- */
  section.block{
    padding:5rem 2rem;
    max-width:1000px;
    margin:0 auto;
    text-align:center;
  }
  section.block.alt{
    background:#FAF9F7;
    max-width:100%;
  }
  section.block.alt .inner{
    max-width:1000px; margin:0 auto;
  }

  .section-title{
    text-align:center;
    max-width:700px;
    margin:0 auto 3rem;
  }

  /* ---------- CARD GRID ---------- */
  .grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
    gap:1.5rem;
    margin-top:2rem;
  }
  .card{
    background:var(--white);
    border:1px solid var(--stone);
    border-top:3px solid var(--gold);
    border-radius:6px;
    padding:1.75rem;
  }
  .card h3{ margin-bottom:.6rem; }

  .grid-4{ grid-template-columns:repeat(4, 1fr); }
  @media (max-width:860px){
    .grid-4{ grid-template-columns:repeat(2, 1fr); }
  }
  @media (max-width:480px){
    .grid-4{ grid-template-columns:1fr; }
  }

  /* ---------- PILLARS (Moral Architecture / Translation / Capability) ---------- */
  .pillars{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
    gap:2rem;
    margin-top:2rem;
  }
  .pillar{
    background:var(--navy);
    color:var(--white);
    padding:2rem;
    border-radius:6px;
  }
  .pillar .eyebrow{ color:var(--stone); }
  .pillar h3{ color:var(--white); }

  /* ---------- LEADERSHIP ---------- */
  .leaders{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
    gap:2.5rem;
    margin-top:2rem;
  }

  .leader h3{ margin-bottom:.25rem; }
  .leader .role{
    color:var(--gold);
    font-weight:600;
    font-size:.9rem;
    display:block;
    margin-bottom:1rem;
  }
  .avatar{
    img{
        width: 200px;; height:200px;
        border-radius:50%;
        background:var(--stone);
        margin-bottom:1rem;
    }
  }

  /* ---------- MISSION / VISION ---------- */
  .mv-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
    gap:2rem;
    margin-top:2rem;
  }
  .mv-card{
    background:var(--forest);
    color:var(--white);
    padding:2.5rem;
    border-radius:6px;
  }
  .mv-card h3{ color:var(--gold); margin-bottom:.75rem; }

  /* ---------- CTA ---------- */
  .cta{
    background:#FAF9F7;
    color:var(--charcoal);
    text-align:center;
    padding:4rem 2rem 5rem;
  }
  .cta h2{ color:var(--navy); }
  .btn{
    display:inline-block;
    margin-top:1rem;
    background:var(--navy);
    color:var(--white);
    padding:.9rem 2rem;
    border-radius:4px;
    font-weight:600;
    transition:background .2s;
  }
  .btn:hover{ background:var(--forest); }

  /* ---------- THEMES LIST ---------- */
  .themes{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
    margin-top:1.5rem;
    justify-content:center;
  }
  .theme-pill{
    background:var(--stone);
    color:var(--navy);
    font-weight:500;
    font-size:.9rem;
    padding:.5rem 1.1rem;
    border-radius:30px;
  }

  /* ---------- CONTACT ---------- */
  #contact{
    position:relative;
    overflow:hidden;
    background:linear-gradient(150deg, var(--navy) 0%, var(--forest) 50%, var(--navy) 100%);
    background-size:220% 220%;
    animation:heroGradient 14s ease infinite;
    color:var(--white);
    padding:5rem 2rem;
  }
  #contact::before{
    content:'';
    position:absolute; inset:0;
    background:
      radial-gradient(circle at 18% 22%, rgba(170,134,82,.20), transparent 45%),
      radial-gradient(circle at 82% 78%, rgba(170,134,82,.14), transparent 45%);
    pointer-events:none;
  }
  #contact .inner{
    position:relative; z-index:1;
    max-width:600px;
    margin:0 auto;
  }
  #contact .section-title h2{ color:var(--white); }
  #contact .section-title p{ color:var(--stone); }

  form{ margin-top:2rem; display:flex; flex-direction:column; gap:1.25rem; }
  label{
    font-size:.85rem;
    font-weight:600;
    margin-bottom:.4rem;
    display:block;
    color:var(--stone);
  }
  input, textarea{
    width:100%;
    padding:.8rem 1rem;
    border-radius:4px;
    border:1px solid var(--stone);
    background:var(--white);
    color:var(--charcoal);
    font-family:'Inter', sans-serif;
    font-size:.95rem;
  }
  textarea{ min-height:140px; resize:vertical; }

  .submit-btn{
    background:var(--gold);
    color:var(--navy);
    border:none;
    padding:.9rem 2rem;
    font-weight:600;
    border-radius:4px;
    cursor:pointer;
    align-self:flex-start;
    transition:opacity .2s;
  }
  .submit-btn:hover{ opacity:.85; }

  footer{
    background:#0B2032;
    color:var(--stone);
    text-align:center;
    padding:2rem;
    font-size:.85rem;
  }

  /* ================================================= */
  /* ================= ENHANCEMENTS ================= */
  /* ================================================= */

  ::selection{ background:var(--gold); color:var(--white); }

  ::-webkit-scrollbar{ width:10px; }
  ::-webkit-scrollbar-track{ background:var(--white); }
  ::-webkit-scrollbar-thumb{ background:var(--stone); border-radius:10px; }
  ::-webkit-scrollbar-thumb:hover{ background:var(--gold); }

  section[id]{ scroll-margin-top:80px; }

  /* Keep page content visible even when browser animations are blocked or delayed. */
  body{ opacity:1; }
  @keyframes bodyFadeIn{ to{ opacity:1; } }

  /* ---------- NAV ---------- */
  nav{ transition:background .35s ease, box-shadow .35s ease, padding .35s ease; }
  nav.scrolled{
    background:rgba(15,43,66,.94);
    backdrop-filter:blur(10px);
    box-shadow:0 8px 24px rgba(0,0,0,.18);
    padding:.7rem 2rem;
  }

  .logo{ transition:transform .3s ease; display:inline-block; }
  .logo:hover{ transform:scale(1.04); }

  .nav-links a{ position:relative; padding-bottom:4px; }
  .nav-links a::after{
    content:'';
    position:absolute; left:0; bottom:0;
    width:0; height:2px;
    background:var(--gold);
    transition:width .3s ease;
  }
  .nav-links a:hover::after{ width:100%; }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    overflow:hidden;
    background:linear-gradient(150deg, var(--navy) 0%, var(--forest) 50%, var(--navy) 100%);
    background-size:220% 220%;
    animation:heroGradient 14s ease infinite;
  }
  @keyframes heroGradient{
    0%{ background-position:0% 50%; }
    50%{ background-position:100% 50%; }
    100%{ background-position:0% 50%; }
  }
  .hero::before{
    content:'';
    position:absolute; inset:0;
    background:
      radial-gradient(circle at 18% 22%, rgba(170,134,82,.20), transparent 45%),
      radial-gradient(circle at 82% 78%, rgba(170,134,82,.14), transparent 45%);
    pointer-events:none;
  }
  .hero h1, .hero p, .hero > .eyebrow, .hero .btn{
    position:relative; z-index:1;
    opacity:1; transform:none;
    animation:heroRise .8s ease forwards;
  }
  .hero > .eyebrow{ animation-delay:.05s; }
  .hero h1{ animation-delay:.15s; }
  .hero p{ animation-delay:.3s; }
  .hero .btn{ animation-delay:.45s; }
  @keyframes heroRise{ to{ opacity:1; transform:translateY(0); } }

  .scroll-cue{
    position:relative; z-index:1;
    margin:3rem auto 0;
    width:24px; height:40px;
    border:2px solid rgba(198,189,178,.6);
    border-radius:20px;
    opacity:0;
    animation:heroRise .8s ease forwards;
    animation-delay:.6s;
  }
  .scroll-cue span{
    position:absolute; top:6px; left:50%;
    width:4px; height:8px;
    background:var(--gold);
    border-radius:2px;
    transform:translateX(-50%);
    animation:scrollCue 1.6s ease infinite;
  }
  @keyframes scrollCue{
    0%{ opacity:1; top:6px; }
    70%{ opacity:0; top:20px; }
    100%{ opacity:0; top:6px; }
  }

  /* ---------- SCROLL REVEAL ---------- */
  section.block, .grid .card, .pillar, .mv-card, .leader, .section-title{
    opacity:1;
    transform:none;
    transition:opacity .6s ease, transform .5s ease;
  }
  section.block.in-view, .grid .card.in-view, .pillar.in-view, .mv-card.in-view, .leader.in-view, .section-title.in-view{
    opacity:1;
    transform:translateY(0);
  }
  .grid .card:nth-child(2), .pillars .pillar:nth-child(2), .mv-grid .mv-card:nth-child(2), .leaders .leader:nth-child(2){ transition-delay:.1s; }
  .grid .card:nth-child(3), .pillars .pillar:nth-child(3){ transition-delay:.2s; }
  .grid .card:nth-child(4){ transition-delay:.3s; }

  .section-title h2::after{
    content:'';
    display:block;
    width:0; height:3px;
    margin:.7rem auto 0;
    background:var(--gold);
    transition:width .6s ease .15s;
  }
  .section-title.in-view h2::after{ width:56px; }

  /* ---------- CARD / PILLAR / MV-CARD HOVER ---------- */
  .grid .card{ transition:opacity .6s ease, transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
  .grid .card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 34px rgba(15,43,66,.14);
    border-color:var(--gold);
  }

  .pillar{ transition:opacity .6s ease, transform .35s ease, box-shadow .35s ease; }
  .pillar:hover{ transform:translateY(-6px); box-shadow:0 18px 34px rgba(0,0,0,.28); }

  .mv-card{ transition:opacity .6s ease, transform .35s ease, box-shadow .35s ease; }
  .mv-card:hover{ transform:translateY(-6px); box-shadow:0 18px 34px rgba(0,0,0,.22); }

  .leader{ transition:opacity .6s ease, transform .35s ease; }
  .avatar{ overflow:hidden; border-radius:50%; width:200px; height:200px; margin:0 auto 1rem; }
  .avatar img{ transition:transform .5s ease; }
  #about .leader .avatar,
  #about .leader .avatar img{ width:250px; height:250px; }
  .leader:hover .avatar img{ transform:scale(1.08); }

  /* ---------- BUTTONS ---------- */
  .btn, .submit-btn{
    position:relative;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  }
  .btn:hover, .submit-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 28px rgba(15,43,66,.28);
  }
  .btn::before{
    content:'';
    position:absolute; top:0; left:-75%;
    width:50%; height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
    transform:skewX(-20deg);
    transition:left .6s ease;
  }
  .btn:hover::before{ left:125%; }

  /* ---------- THEME PILLS ---------- */
  .theme-pill{ display:inline-block; transition:background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease; }
  .theme-pill:hover{
    background:var(--gold);
    color:var(--white);
    transform:translateY(-3px);
    box-shadow:0 10px 20px rgba(170,134,82,.35);
  }

  /* ---------- FORM FOCUS ---------- */
  input, textarea{ transition:border-color .25s ease, box-shadow .25s ease; }
  input:focus, textarea:focus{
    outline:none;
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(170,134,82,.25);
  }

  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration:.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
    }
  }

  /* ---------- PUBLICATIONS ---------- */
  .publications-block{
    background:#FAF9F7;
    max-width:100%;
  }
  .publications-block .inner{ max-width:1000px; margin:0 auto; }
  .publication-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    gap:1.5rem;
    margin-top:2rem;
    text-align:left;
  }
  .publication-card{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    min-height:245px;
    padding:1.75rem;
    background:var(--white);
    border:1px solid var(--stone);
    border-top:3px solid var(--gold);
    border-radius:6px;
    box-shadow:0 6px 18px rgba(15,43,66,.06);
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  }
  .publication-card:hover{
    transform:translateY(-6px);
    border-color:var(--gold);
    box-shadow:0 18px 34px rgba(15,43,66,.14);
  }
  .publication-card-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:.55rem;
    margin-bottom:1rem;
  }
  .publication-category,
  .publication-type{
    display:inline-flex;
    align-items:center;
    min-height:26px;
    padding:.25rem .65rem;
    border-radius:30px;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
  }
  .publication-category{ background:var(--stone); color:var(--navy); }
  .publication-type{ background:rgba(41,78,70,.12); color:var(--forest); }
  .publication-card h3{ margin-bottom:.7rem; }
  .publication-card p{ color:var(--charcoal); font-size:.95rem; }
  .publication-card-action{
    margin-top:auto;
    padding:.7rem 1rem;
    border:1px solid var(--navy);
    border-radius:4px;
    background:transparent;
    color:var(--navy);
    font-family:'Inter', sans-serif;
    font-weight:700;
    cursor:pointer;
    transition:background .25s ease, color .25s ease, transform .25s ease;
  }
  .publication-card-action:hover{
    background:var(--navy);
    color:var(--white);
    transform:translateY(-2px);
  }
  .publication-state{
    grid-column:1 / -1;
    margin:0;
    padding:2rem;
    color:var(--charcoal);
    text-align:center;
  }
  .publication-error{ color:#8b3d34; }

  /* ---------- PUBLICATION ACCESS MODAL ---------- */
  body.modal-open{ overflow:hidden; }
  .publication-modal{
    position:fixed;
    inset:0;
    z-index:300;
    display:none;
    align-items:center;
    justify-content:center;
    padding:1.25rem;
  }
  .publication-modal.open{ display:flex; }
  .publication-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(11,32,50,.76);
    cursor:pointer;
  }
  .publication-modal-dialog{
    position:relative;
    z-index:1;
    width:min(100%, 540px);
    max-height:calc(100vh - 2.5rem);
    overflow:auto;
    padding:2.25rem;
    background:var(--white);
    border-top:4px solid var(--gold);
    border-radius:6px;
    box-shadow:0 24px 60px rgba(0,0,0,.3);
  }
  .publication-modal-dialog h2{ padding-right:2rem; margin-bottom:.65rem; }
  .publication-modal-description{ color:var(--charcoal); margin-bottom:1rem; }
  .publication-modal-close{
    position:absolute;
    top:.65rem;
    right:.8rem;
    width:34px;
    height:34px;
    border:0;
    background:transparent;
    color:var(--navy);
    font-size:1.8rem;
    line-height:1;
    cursor:pointer;
  }
  .publication-access-form{ margin-top:1.25rem; gap:.7rem; }
  .publication-access-form label{ color:var(--navy); margin-bottom:0; }
  .publication-access-form label span{ color:var(--charcoal); font-weight:400; }
  .publication-access-form input:not([type="checkbox"]){ margin-bottom:.45rem; }
  .publication-access-form input[type="checkbox"]{ width:auto; margin:0; accent-color:var(--gold); }
  .publication-consent{
    display:flex !important;
    align-items:flex-start;
    gap:.55rem;
    margin-top:.2rem;
    color:var(--charcoal) !important;
    font-weight:400 !important;
    line-height:1.45;
  }
  .publication-honeypot{
    position:absolute !important;
    left:-10000px !important;
    width:1px !important;
    height:1px !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
  .publication-submit{ align-self:stretch; margin-top:.5rem; }
  .publication-modal-message{
    margin:1rem 0 0;
    padding:.75rem 1rem;
    border-radius:4px;
    font-size:.9rem;
  }
  .publication-modal-message.hidden{ display:none; }
  .publication-modal-message.success{ background:rgba(41,78,70,.12); color:var(--forest); }
  .publication-modal-message.error{ background:rgba(139,61,52,.1); color:#8b3d34; }

  @media (max-width:600px){
    .publication-modal-dialog{ padding:1.75rem 1.25rem; }
    .publication-grid{ grid-template-columns:1fr; }
  }