:root {
      --navbar-height: 70px;
      --gold: #a8957b;
    }
    
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Oxygen', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      margin: 0;
      padding-top: var(--navbar-height); 
    }

    img {
      max-width: 100%;
      display: block;
    }

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

    html.page-loading,
    body.page-loading {
      overflow: hidden;
    }

    html {
      -ms-overflow-style: none; 
      scrollbar-width: none;    
      scroll-behavior: smooth;
      scroll-padding-top: var(--navbar-height);
    }

    html::-webkit-scrollbar {
      display: none;       
    }

    html.reveal-ready [data-reveal] {
      opacity: 0;
      transform: translateY(18px);
      will-change: transform, opacity;
    }

    html.reveal-ready [data-reveal].is-revealed {
      opacity: 1;
      transform: none;
    }
    #loader {
      position: fixed;
      inset: 0;            
      display: flex;
      align-items: center;
      justify-content: center;
      background: #1f1a14;      
      z-index: 9999;
      transition: opacity 0.4s ease, visibility 0.4s ease;
    }

    #loader.fade-out {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    /* Scroll-reveal base state */
    [data-reveal] {
      opacity: 0;
      transform: translateY(14px);
      will-change: transform, opacity;
    }

    [data-reveal].is-revealed {
      opacity: 1;
      transform: none;
    }

    @media (prefers-reduced-motion: reduce) {
      [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
      }
    }

    /* The spinner circle */
    .spinner {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      border: 4px solid rgba(255, 255, 255, 0.2);
      border-top-color: #a08060;  
      animation: spin 0.5s linear infinite;
    }

    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    .display {
      font-family: var(--font-display);
    }

    .nav-wrap {
      position: fixed; 
      top: 0;
      left: 0;
      width: 100%;  
      background: #ffffff;
      max-width: 100%;
      opacity: 1;
      transform: translateY(0);
      z-index: 8999;  
      transition:
        opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .nav-wrap.nav-hidden {
      opacity: 0;
      pointer-events: none;
      transform: translateY(-40px); 
    }

    .nav-bar {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
    }

    .nav-left,
    .nav-right {
      display: flex;
      gap: 120px;
      align-items: center;
    }
    .nav-right{
      position: relative;
      right: 25px;
    }
    .nav-left{
      position: relative;
      right: 5%;
    }
    .nav-link:hover,
    .nav-link:focus {
      color: #a08060; 
      border-bottom-color: #a08060;
      cursor: pointer;
    }
    .nav-right {
      justify-content: flex-end;
      right: -3px;
    }

    .nav-center {
      justify-self: center;
    }

    .nav-link {
      text-align: center;
      font: normal normal normal 17px/21px Oxygen;
      letter-spacing: 0px;
      color: #434343;
      opacity: 1;
    }

    .logo-img {
      height: 70px;
      width: auto;
      object-fit: contain;
    }

   .paragraph span {
      display: block;
      margin-bottom: -10px;
    }

    .paragraph {
      margin-bottom: 1.5em;
    }

    .sa-overlay-body p.paragraph {
      margin-bottom: 1.5em;
    }

    /* Scroll reveal base state */
    [data-reveal] {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .5s ease, transform .6s ease;
      will-change: opacity, transform;
    }

    /* Revealed state */
    [data-reveal].is-revealed {
      opacity: 1;
      transform: none;
    }

    /* If user prefers reduced motion */
    @media (prefers-reduced-motion: reduce) {
      [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
    }

    #image-lightbox {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.85);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 99999;
    }

    #image-lightbox.active {
      display: flex;
    }

    .lightbox-img {
      max-width: 92vw;
      max-height: 92vh;
      border-radius: 12px;
      transition: transform 0.3s ease;
    }
    
    .lightbox-backdrop {
      position: absolute;
      inset: 0; 
      cursor: grab;
      z-index: 1000;
    }

    .lightbox-controls {
      position: absolute;
      top: 15px;
      right: 20px;
      display: flex;
      gap: 12px;
      z-index: 100001;
    }

    .zoom-in-btn,
    .fullscreen-btn,
    .lightbox-close,
    .share-btn {
      font-size: 15px;
      color: white;
      background: rgba(0, 0, 0, 0.55);
      border: none;
      padding: 2px 5px;
      cursor: pointer;
      display: grid;
      place-items: center;
      user-select: none;
    }

    .share-menu {
      position: absolute;
      top: 55px;
      right: 40px;
      background: white;
      border-radius: 5px;
      display: none;
      min-width: 150px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.3);
      z-index: 100002;
    }

    .share-menu::before {
      content: "";
      position: absolute;
      top: -10px;
      right: 18px; 
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 10px solid white;
      filter: drop-shadow(0 -1px 1px rgba(0,0,0,0.15));
    }

    .share-menu.open {
      display: block;
    }

    .share-menu ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .share-menu li {
      padding: 6px 16px;
      cursor: pointer;
      font-size: 10px;
      color: #000000;
      display: flex;
      align-items: center;
    }

    .share-menu li:hover {
      background: #f2f2f2;
    }

    /* HERO -------------------------------------------------- */
    .hero {
      display: flex;
      justify-content: center;
      margin: 0;  
    }
    
    .hero-bg {
      position: absolute;
      inset: 0;
      background-image: url("images/PA-Images/Website 1.png"); 
      background-attachment: fixed;
      background-size: cover;
      filter: brightness(0.5) contrast(1.1);
      z-index: 3;
    }

    .hero-content {
      position: relative;
      z-index: 3;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      width: 100%;
      max-width: 2000px;
    }

    .hero-portrait {
      transition: opacity 0.8s ease, transform 0.8s ease;
    }

    .hero-text {
      align-self: flex-end;
      color: #fff;
      text-align: left;
      opacity: 1;
      margin-bottom: 20%;
    }

    .hero-name {
      font: normal normal normal 120px/180px "Balerno Serif", serif;
      line-height: 1;
      letter-spacing: 0.02em;
    }

    .hero-role {
      margin: 30px 0 0 0;
      font: normal normal normal 10px/28px Oxygen;
      letter-spacing: 8.8px;
      text-transform: uppercase;
      color: #FFFFFF;
      text-align: center;
    }

    @media (min-width: 1200px) {
      .hero {
        height: calc(100vh - var(--navbar-height));
      }

      .hero-portrait {
        width: clamp(500px, 32vw, 791px); 
      }

      .hero-name {
        font-size: clamp(6rem, 7vw, 8.1rem);
      }

      .hero-role {
        font-size: 1.3rem; 
      }
    }

    @media (max-width: 1100px), (max-height: 780px) {
      .hero {
        height: calc(100vh - var(--navbar-height));
      }

      .hero-portrait {
        width: clamp(400px, 31vw, 650px); 
      }

      .hero-name {
        font-size: clamp(5rem, 6vw, 8.1rem);
      }

      .hero-role {
        font-size: 1rem;  
      }
    }

    @media (max-width: 900px), (max-height: 700px)
      { 
      .hero {
        height: calc(100vh - var(--navbar-height)); 
      }
      .hero-portrait { 
        width: clamp(290px, 30vw, 550px);
      } 
      .hero-name {
        font-size: clamp(5rem, 6vw, 8.1rem);
      } 
      .hero-role {
        font-size: .7rem; 
      } 
      .hero-bg {
        background-attachment: scroll;
      }
  }

    /* ABOUT VIEW */
    .about {
      position: relative;
      min-height: 93vh;
      overflow: hidden;
      align-items: center;
      background: white; 
      box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.15);
      z-index: 2;
    }

    .about-main {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: clamp(24px, 6vw, 60px);
    }
    
    .title {
      margin: 0 0 -20px;
      text-align: left;
      font: normal normal bold 80px/185px Balerno Serif;
      letter-spacing: 3.3px;
      color: #434343;
      opacity: 1;
    }

    .kicker {
      margin: 0 0 16px;
      font: normal normal normal 14px/24px Oxygen;
      letter-spacing: 8.0px;
      color: #A39784;
      text-transform: uppercase;
      opacity: 1;
    }

    .lede {
      margin: 0 0 22px;
      font: normal normal normal 12px/21px Oxygen;
      letter-spacing: 1.7px;
      color: #434343;
      opacity: 1;
    }

    .btn {
      background: #a8957b;
      color: #fff;
      padding: 10px 25px;
      border-radius: 4px;
      font: normal normal normal 12px/17px Oxygen;
      letter-spacing: 2.1px;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      z-index: 1;
    }

    .btn:hover {
      transform: translateY(-1px);
      background: #b8a58c;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .image-stack {
      position: relative;
      width: 100%;
      height: 600px; 
      margin-top: 14%;
    }

    .image-stack .img {
      position: absolute;
      overflow: hidden;
      border-radius: 10px;
    }

    .img--top {
      width: 505px;
      top: 2%;
      z-index: 2;
    }

    .img--bottom {
      width: 568px;
      left: -60%;
      bottom: -14%;
      z-index: 2;
    }
      
    .image-stack img {
      width: 150%;
      height: auto;
      display: block;
    }

    .aboutme-inner {
      background: #ffffff;
      padding: 50px 60px 0 50px;
      border-radius: 24px 24px 0 0;
      max-width: 1400px;
      width: 100%;
      min-height: calc(100vh - var(--navbar-height) - 40px);
      overflow-y: hidden;
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 60px;
      box-shadow: 0 18px 40px rgba(0,0,0,0.18);
    }
    
    .aboutme-inner .photo {
      border-radius: 16px 16px 0 0;
      background: linear-gradient(135deg, #303030, #000000);
      display: flex;
      align-items: flex-end;   
      max-width: 900px;  
      justify-content: center;
      overflow: hidden;
    }

    .photo img {
      width: 85%;   
      height: auto;     
      object-fit: cover; 
      transform: scale(1.1);
    }


    .aboutme-inner .title {
      font: normal normal bold 90px/190px"Balerno Serif", serif;
      color: #434343;
      position: relative;
      letter-spacing: 3.48px;
      top: -20px;
    }

    .aboutme-inner p {
      margin-bottom: 35px;
      font: normal normal normal 16px/25px Oxygen;
      line-height: 1.7;
      color: #434343;
      letter-spacing: 0.2px;
      text-align: left;
    }

    /* CHARITY SUMMARY ---------------------------------------- */

    .charity {
      position: relative;
      min-height: 10vh;
      color: #fff;
      align-items: center;
      overflow: hidden;
    }

    .charity-content {
      position: relative;
      text-align: center;
      margin-bottom: 5%;
      z-index: 1;
    }

    .pattern {
      position: absolute;
      inset: 0;
      background-image: url("images/PA-Images/Charity_bg.png"); 
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      filter: contrast(0.95) brightness(0.4);
      z-index: 1;
    }

    .charity-title {
      font: normal normal bold 80px/130px Balerno Serif;
      letter-spacing: 14.1px;
      color: #A39784;
      opacity: 1;
    }

    .charity-lede {
      margin: 0 auto clamp(28px, 8vh, 35px);
      font: normal normal normal 12px/25px Oxygen;
      letter-spacing: 1.7px;
      opacity: 1;
    }

    .charity-photo {
      width: min(1100px, 92vw);
      margin: 0 auto clamp(25px, 10vh, 48px);
      border-radius: 10px;
      overflow: hidden;
    }

    .charity-card:hover .read {
      color: #8a7a63;
      border-bottom-color: #a8957b;
    }

    .charity-pagination {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 24px;
      flex-wrap: wrap;
      align-items: center;
    }

    .charity-page-btn--arrow {
      font-weight: 600;
      padding: 6px 10px;
    }

    .charity-page-btn[disabled] {
      opacity: 0.4;
      cursor: default;
      box-shadow: none;
    }

    .charity-page-ellipsis {
      min-width: 34px;
      text-align: center;
      font-size: 13px;
      letter-spacing: 0.06em;
      color: #999;
    }

    .charity-page-btn {
      min-width: 34px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid #d7d0c4;
      background: #ffffff;
      font-size: 13px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    .charity-page-btn.is-active {
      background: #a8957b;
      color: #ffffff;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    }

    .charity-page-btn:hover {
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
    }

    .charity-all-overlay,
    .assoc-all-overlay,
    .sa-overlay,
    .assoc-overlay,
    .aboutme-overlay {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      padding-top: calc(var(--navbar-height) + 30px); 
      overflow-y: auto;
      z-index: 1000;   
      opacity: 0;
      transform: translateY(100%);
      pointer-events: none;
      transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                  transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .aboutme-overlay.is-visible,
    .charity-all-overlay.is-visible,
    .assoc-all-overlay.is-visible,
    .sa-overlay.is-visible,
    .assoc-overlay.is-visible {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .aboutme-bg,
    .charity-all-overlay .bg,
    .assoc-all-overlay .bg,
    .sa-overlay .bg,
    .assoc-overlay .bg {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: -1;
      pointer-events: none;
    }

    .charity-all-overlay .container,
    .assoc-all-overlay .container {
      position: relative;
      z-index: 1;
    }

    .charity-all-overlay .hero-title,
    .assoc-all-overlay .hero-title,
    .sa-overlay .hero-title  {
      text-align: center;
      font: normal normal normal 65px/130px Balerno Serif;
      letter-spacing: 7.17px;
      color: #ffffff;
    }

    /* === SUPPORTED ASSOCIATIONS – ALL OVERLAY (Charity All style) === */

    .assoc-stack, .stack {
      display: flex;
      flex-direction: column;
      gap: 28px;
      background: #ffffff;
      border-radius: 20px 20px 0 0;
      padding: 30px;
      max-width: 1402px;
      height: calc(95vh - var(--navbar-height) - 50px); 
      overflow-y: auto; 
      overflow-x: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }

    .assoc-stack::-webkit-scrollbar,
    .stack::-webkit-scrollbar,
    .aboutme-overlay::-webkit-scrollbar,
    .sa-overlay-card::-webkit-scrollbar {
      display: block !important;
      width: 8px;
    }

    .assoc-stack::-webkit-scrollbar-track,
    .stack::-webkit-scrollbar-track,
    .aboutme-overlay::-webkit-scrollbar-track,
    .sa-overlay-card::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.1);
      border-radius: 4px;
    }

    .assoc-stack::-webkit-scrollbar-thumb,
    .stack::-webkit-scrollbar-thumb,
    .aboutme-overlay::-webkit-scrollbar-thumb,
    .sa-overlay-card::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.35);
      border-radius: 4px;
    }

    .assoc-stack::-webkit-scrollbar-thumb:hover,
    .stack::-webkit-scrollbar-thumb:hover,
    .aboutme-overlay::-webkit-scrollbar-thumb:hover,
    .sa-overlay-card::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 0, 0, 0.55);
    }

    .assoc-title {
      font: normal normal 600 18px/1.3 "Inter", system-ui, sans-serif;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #2e2b27;
    }

    .assoc-link {
      display: inline-block;
      margin-bottom: 14px;
      font-size: 13px;
      letter-spacing: 0.08em;
      color: #7a90b8;
      text-decoration: none;
    }

    .assoc-link:hover {
      text-decoration: underline;
    }
    
    .assoc-body p,
    .charity-body p {
      margin: 0 0 12px;
      line-height: 1.6;
      color: #4c4c47;
      font-size: 14px;
    }
    
    .charity-body ul,
    .charity-extra-wrapper ul,
    .assoc-body ul,
    .assoc-extra-wrapper ul {
      list-style-type: disc;    
      padding-left: 1.5rem;       
      margin: 0.5rem 0 1rem 0;   
    }

    .charity-body li,
    .charity-extra-wrapper li,
    .assoc-body li,
    .assoc-extra-content li{
      margin-bottom: 0.5rem;
      line-height: 1.5;
      font-size: 14px;          
      color: #4c4c47;
    }

    .charity-card-title{
      font: normal normal 600 18px / 1.3 "Inter", system-ui, sans-serif;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #2e2b27;
      margin-bottom: 2%;
    }

    .charity-card,
    .assoc-card {
      border-radius: 18px;
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 40px;
      padding: 20px;
      background: #fff;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      transition: all 0.6s cubic-bezier(0.9, 0, 0.2, 1);
    }
    
    .charity-card.expanded .charity-body,
    .assoc-card.expanded .assoc-body {
      padding: 0 40px;
    }
    .contact-link {
      color: red;
      text-decoration: none; 
    }

    .charity-card:not(.expanded) .media img,
    .assoc-card:not(.expanded) .media img {
      transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .charity-card:not(.expanded) .media:hover img,
    .assoc-card:not(.expanded) .media:hover img {
      transform: scale(1.08) rotate(3deg);
    }

    .media {
      margin: 0;
      align-self: start;
      overflow: hidden;
      width: 100%;
      height: 350px;
      border-radius: 12px;
    }

    .media-inner {
      position: relative;
      width: 100%;
      height: 100%;
    }
    
    .video-wrapper {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border-radius: 12px;
      overflow: hidden;
    }

    .video-content {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .play-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 42px;
      color: white;
      background: rgba(0,0,0,0.45);
      width: 65px;
      height: 65px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      opacity: 0.9;
    }

    .media-slide {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 12px;
      opacity: 0;
      transform: scale(1) translateY(0);
      transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .media-slide.is-active {
      opacity: 1;
      transform: scale(1.02);
      pointer-events: auto;
    }
    
    .charity-card.expanded .media-slide.is-active,
    .assoc-card.expanded .media-slide.is-active{
      object-fit: contain;
      transform: scale(0.95); 
    }

    .media-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      border: none;
      background: rgba(0, 0, 0, 0.25);
      color: white;
      backdrop-filter: blur(4px);
      width: 42px;
      height: 42px;
      border-radius: 50%;
      font-size: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }

    .media-prev {
      left: 10px;
    }

    .media-next {
      right: 10px;
    }

    .media-dots {
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1000;                  
      display: flex;
      gap: 10px;
      padding: 6px 10px;
      background: rgba(0, 0, 0, 0.25); 
      border-radius: 20px;
      backdrop-filter: blur(4px);
      visibility: visible;            
    }

    .media-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.7);
      transition: 0.3s ease;
    }

    .media-dot.is-active {
      background: #ffffff;      
      transform: scale(1.4);    
    }

    .charity-card.expanded .media-nav {
      opacity: 1;
      pointer-events: auto;
    }

    .assoc-card.expanded .media-nav {
      opacity: 1;
      pointer-events: auto;
    }
    
    .media-nav {
      z-index: 50 !important;
    }

    .media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 12px;
      transform: scale(1) translateY(0);
      transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .assoc-card.expanded .media img,
    .charity-card.expanded .media img {
      transform: scale(1) translateY(-1%);
    }

    .charity-card.expanded .media,
    .assoc-card.expanded .media {
      height: 450px;
    }

    .body {
      align-self: start;
      transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .assoc-card.expanded .body, .charity-card.expanded .body {
      transform: translateY(-10px);
    }

    .assoc-card.expanded,
    .charity-card.expanded {
      grid-template-columns: 1fr;
    }

    .assoc-card-stack {
      background: #fff;
      border-radius: 20px 20px 0 0;
      padding: 40px;
      margin-bottom: 60px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
    }

    .assoc-extra-wrapper,
    .charity-extra-wrapper {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height 0.6s ease, opacity 0.5s ease;
    }

    .assoc-card.expanded .assoc-extra-wrapper,
    .charity-card.expanded .charity-extra-wrapper {
      max-height: 1000px; 
      opacity: 1;
    }

    .assoc-read-toggle {
      display: inline-block;
      margin-top: 4px;
      color: #a8957b;
      font-weight: 600;
      font-size: 15px;
      letter-spacing: 0.5px;
      border-bottom: 2px solid transparent;
      transition: color 0.3s ease, border-color 0.3s ease;
      pointer-events: auto; 
    }

    .assoc-card:hover .assoc-read-toggle {
      color: #8a7a63;
      border-bottom-color: #a8957b;
    }
    
    .additional-content {
      padding-top: 4px;
    }

    .read {
      display: inline-block;
      color: #a8957b;
      font-weight: 600;
      font-size: 15px;
      letter-spacing: 0.5px;
      border-bottom: 2px solid transparent;
      transition: color 0.3s ease, border-color 0.3s ease;
      pointer-events: auto; 
    }

    /* SUPPORTED ASSOCIATIONS -------------------------------- */

    .sa {
      position: relative;
      min-height: 100vh;
      overflow: hidden;
    }

    .sa-content {
      position: relative;
      z-index: 1;
      text-align: center;
    }

    .sa-title {
      font: normal normal bold 70px/130px Balerno Serif;
      letter-spacing: 7.58px;
      color: #a39784;
    }

    .sa-lede {
      margin: 0 auto clamp(10px, 3vh, 40px);
      font: normal normal normal 12px/25px Oxygen;
      letter-spacing: 1.7px;
      color: #FFFFFF;
    }

    .sa-grid-top {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      padding: 5px;
    }

    .sa-grid-bottom {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      padding: 5px;
      margin-bottom: 35px;
    }
  
    .sa-item {
      position: relative;
      background: #000;
      overflow: hidden;
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35),
        0 2px 6px rgba(0, 0, 0, 0.25);
    }

    .sa-item img {
      width: 100%;
      height: 250px;
      object-fit: cover;
      transition: transform 0.3s ease;
    }

    .sa-item:hover img {
      transform: scale(1.05);
    }

    .sa-hover {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      opacity: 0;
      transition: all 0.3s ease;
      transform: translateY(-100px);
    }

    .sa-item:hover .sa-hover {
      opacity: 1;
      transform: translateY(0);
    }

    .sa-readmore {
      padding: 8px 20px;
      background: var(--gold);
      color: white;
      border-radius: 6px;
      font: normal normal normal 13px/27px Oxygen;
      letter-spacing: 2.1px;
      transition: all 0.3s ease;
      transform: translateY(-10px);
    }

    .sa-item:hover .sa-readmore {
      transform: translateY(0);
      opacity: 1;
    }

    .sa-readmore:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    /* === COMPANIES I WORKED FOR ============================== */

    .companies {
      position: relative;
      color: #f4eee4;
      overflow: hidden;
    }

    .companies-bg {
      position: absolute;
      inset: 0;
      background-image: url("images/PA-Images/Buildings2.png"); 
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      filter: brightness(0.3);
      z-index: 1;
    }

    .companies-inner {
      position: relative;
      z-index: 1;
      max-width: 100%;
      text-align: center;
      padding: 0 0 80px;
    }

    .companies-title {
      margin-top: 1%;
      font: normal normal bold 55px/127px Balerno Serif;
      letter-spacing: 6.26px;
      color: #A39784;
    }

    .companies-lede{
      font: normal normal normal 12px/25px Oxygen;
      letter-spacing: 1.7px;
      color: #FFFFFF;
      opacity: 1;
    }

    .companies-carousel {
      position: relative;
      width: 100vw;  
      height: 150%;
      margin: 0 auto;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .companies-track {
      position: relative;
      margin-bottom: 2%;
      width: 100%;
      height: 450px;
      overflow: hidden;       
    }

    .company-bubble {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(1);
      width: 245px;
      height: 245px;
      border-radius: 50%;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.4;
      transition:
        transform 0.35s ease,
        opacity 0.3s ease,
        filter 0.3s ease;
    }

    .companies-track.is-dragging {
      cursor: grabbing !important;
    }

    .company-bubble a {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
      cursor: pointer;
    }

    .company-bubble img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: 50%;
    }

    .company-bubble.is-center {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.15);
      box-shadow: 0 22px 60px rgba(0, 0, 0, 0.65);
      pointer-events: auto;  
      cursor: pointer;
      z-index: 5;
    }

    .company-bubble:hover {
      opacity: 1 !important;
      transform: translate(-50%, -50%) scale(1.08);
      box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
    }

    .company-bubble.is-center:hover {
      transform: translate(-50%, -50%) scale(1.22);
      box-shadow: 0 28px 70px rgba(0, 0, 0, 0.75);
    }

    .companies-arrow {
      position: absolute;
      bottom: 20px; 
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: none;
      background: #ffffff;
      color: #222;
      font-size: 20px;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
      z-index: 10; 
    }

    .companies-arrow--prev {
      left: 50%; 
      margin-left: -120px; 
    }

    .companies-arrow--next {
      left: 50%;
       margin-left: 70px;
    }

    .companies-arrow:hover {
      transform: translateY(-2px);
      box-shadow: 0 0 5px rgba(244, 244, 244, 0.5);
    }

    .companies-arrow:active {
      transform: translateY(0);
      box-shadow: 0 5px 16px rgba(0, 0, 0, 0.4);
    }

    .sa-overlay .container {
      position: relative;
      z-index: 1;
    }

    .sa-overlay .hero-title {
      text-align: center;
      font: normal normal normal 65px/145px Balerno Serif;
      letter-spacing: 7.17px;
      color: #ffffff;
    }

    .sa-overlay-card {
      background: #ffffff;
      border-radius: 20px 20px 0 0;
      padding: 40px;
      max-width: 1360px;
      height: calc(90vh - var(--navbar-height) - 40px);
      overflow: auto; 
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 16px;
    }

    .sa-overlay-media {
      margin: 0;
      border-radius: 18px;
      overflow: hidden;
      background: #f5f5f5;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      grid-row: 1;
      width: 100%;  
      height: 400px; 
    }

    .sa-overlay-media img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover; 
      object-position: center; 
    }

    .sa-overlay-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center; 
    }

    .sa-overlay-body {
      align-self: start;
      grid-row: 2;
      padding: 0 40px;
    }

    .sa-overlay-title {
      margin: 0 0 20px;
      font: normal normal bold 32px/45px Oxygen;
      letter-spacing: 3.2px;
      color: #434343;
      opacity: 1;
    }

    .sa-overlay-body p {
      font: normal normal normal 13px/25px Oxygen;
      letter-spacing: 1.7px;
      color: #434343;
      opacity: 1;
    }

    /* CONTACT ------------------------------------------------ */

    .contact {
      position: relative;
      min-height: 83.5vh;
      display: flex;
      overflow: hidden;
    }

    .contact-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      align-items: center;
      width: 100%;
      max-width: 1600px;
      padding: 0 60px;
    }

    .contact-copy {
      width: 100%;
      margin-bottom: 43%;
      box-sizing: border-box;
    }

    .contact-title {
      text-align: left;
      font: normal normal bold 45px/60px Balerno Serif;
      letter-spacing: 5.26px;
      color: #A39784;
      opacity: 1;
    }

    .contact-lede {
      margin-top: 2%;
      font: normal normal normal 13px/21px Oxygen;
      letter-spacing: 1.7px;
      color: #FFFFFF;
      opacity: 1;
    }

    .contact-form {
      width: 70%;
      max-width: 698px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-left: 27%;
    }

    .contact-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .contact-input,
    .contact-textarea {
      width: 100%;
      border: none;
      border-radius: 8px;
      padding: 12px 14px;
      font-size: 14px;
      color: #222;
      background: #fff;
    }

    .contact-input::placeholder,
    .contact-textarea::placeholder {
      font: normal normal normal 14px/20px "Roboto", system-ui;
      letter-spacing: 1.2px;
      color: #7f7f7f;
      opacity: 0.8;
    }

    .contact-textarea {
      resize: vertical;
      min-height: 150px;
    }

    .contact-btn {
      width: 100%;
      margin-top: 18px;
      padding: 12px 20px;
      border-radius: 8px;
      border: none;
      background: var(--gold);
      color: #fff;
      letter-spacing: 0.12em;
      font-size: 13px;
      cursor: pointer;
      transition: transform 0.15s ease, opacity 0.15s ease;
    }

    .contact-btn:hover {
      transform: translateY(-1px);
    }

    .sr-only {
      position: absolute !important;
      height: 1px;
      border: none;
      width: 1px;
      overflow: hidden;
      clip: rect(1px, 1px, 1px, 1px);
      white-space: nowrap;
    }

    @media (max-width: 980px) {
      .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 40px 20px;
      }
      .contact-copy {
        order: 1;
      }
      .contact-form {
        order: 2;
      }
    }

    /* ===========================
      GLOBAL SLIDE ANIMATIONS
      =========================== */

    [data-anim] {
      opacity: 1;
      transform: none;
    }

    @keyframes slideFromLeft {
      from { opacity: 0; transform: translateX(-100px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    .animate-from-left {
      animation: slideFromLeft 0.8s ease-out;
    }

    @keyframes slideFromRight {
      from { opacity: 0; transform: translateX(100px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    .animate-from-right {
      animation: slideFromRight 0.8s ease-out;
    }

    @keyframes slideFromTop {
      from { opacity: 0; transform: translateY(-100px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .animate-from-top {
      animation: slideFromTop 0.8s ease-out;
    }

    @keyframes slideFromBottom {
      from { opacity: 0; transform: translateY(100px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .animate-from-bottom {
      animation: slideFromBottom 0.8s ease-out;
    }
    @keyframes heroSlideFromLeft {
      from { opacity: 0; transform: translateX(-100px); }
      to { opacity: 1; transform: translateX(0); }
    }

    .animate-hero-left {
      animation: heroSlideFromLeft 0.9s ease-out forwards;
    }
    
    .back-to-top{
      position: fixed;
      right: 18px;
      bottom: 80px;
      width: 44px;
      height: 44px;
      border-radius: 999px;
      font-size: 20px;
      border: none;
      background: #a8957b;
      color: #fff;
      cursor: pointer;
      z-index: 9998;
      opacity: 0;
      transform: translateY(10px);
      pointer-events: none;
      transition: opacity .2s ease, transform .2s ease;
    }

    .back-to-top:hover {
      background: #8a7a63;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.227);
    }

    .back-to-top.is-visible{
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    /* ===========================
      FOOTER
      =========================== */

    footer {
      position: relative;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 14px;
      text-align: center;
      font-size: 12px;
      background: #000;
      letter-spacing: 1px;
      color: #eee;
    }

    .footer-links {
      margin-bottom: 10px;
    }

    .footer-links a {
      color: #9c907e;
      text-decoration: none;
      margin: 0 5px;
    }

    .footer-links a:hover {
      color: #88693d;
      transition: color 0.5s ease;
    }

    .footer-line {
      width: 100%;
      max-width: 400px;
      margin: 10px auto;
      border: none;
      border-top: 1px solid rgba(150, 111, 68, 0.2);
    }

    .footer-copy {
      margin-top: 10px;
    }

    .grecaptcha-badge {
      z-index: 1000;
    }

   /* =========================
      MOBILE RESPONSIVE PATCH
      ========================= */

    html, body {
      max-width: 100%;
      overflow-x: hidden;
    }

    .nav-link, .btn, .read, .assoc-read-toggle, .charity-page-btn, .companies-arrow {
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    @media (max-width: 900px) {
      .hero-bg,
      .companies-bg {
        background-attachment: scroll;
        background-position: center;
      }
    }

    @media (max-width: 430px) {
      .nav-left,
      .nav-right {
        gap: 12px;
      }

      .nav-link {
        font-size: 13px;
      }
    }

    /* ---------- HERO ---------- */
    @media (max-width: 900px) {
      .hero {
        min-height: 70vh;
        padding: 60px 20px 40px 20px;
      }

      .hero-content {
        flex-direction: column;
        gap: 10px;
      }

      .hero-portrait {
        width: min(82vw, 360px);
        margin-inline: auto;
      }

      .hero-text {
        margin-inline: auto;
        text-align: center;
      }

      .hero-name {
        font-size: clamp(42px, 10vw, 64px);
        line-height: 1.05;
      }

      .hero-role {
        margin-top: 10px;
        font-size: 11px;
        letter-spacing: 4px;
      }
    }

    /* ---------- ABOUT ---------- */
    @media (max-width: 980px) {
      .about-main {
        grid-template-columns: 1fr;
        padding: 40px 20px;
      }

      .title, .hero-title{
        font-size: clamp(34px, 19vw, 54px);
        line-height: 1.1;
        margin-bottom: 10px;
      }

      .kicker {
        font-size: 12px;
        letter-spacing: 4px;
      }

      .lede {
        font-size: 13px;
        line-height: 1.7;
      }

      .image-stack {
        height: auto;
        min-height: 340px;
      }

      .img--top{
        width: 80%;
        left: 20%;
      }

      .img--bottom {
        width: 80%;
        left: 0;
        top: 50%;
      }
    }

    /* ---------- OVERLAYS / STACKS ---------- */
    @media (max-width: 900px) {
      .aboutme-inner,
      .sa-overlay-card {
        grid-template-columns: 1fr;
        padding: 18px 16px 0;
        gap: 18px;
        border-radius: 18px 18px 0 0;
        min-height: calc(100svh - var(--navbar-height) - 10px);
      }


      .charity-title {
        letter-spacing: 0.18em; 
      }

      .charity-photo {
        width: 100%;
        border-radius: 10px;
      }

      .photo{
        width: min(52vw, 460px);
        margin-inline: auto;
      }

      .aboutme-inner .title, .charity-title {
        font-size: clamp(46px, 12vw, 52px);
        line-height: 1.1;
        margin-bottom: 10px;
      }
      
      .aboutme-inner p {
        font-size: 11px;
      }

      .sa-overlay-media {
        height: 260px;
      }

      .sa-overlay-body {
        padding: 0 8px;
      }

      .stack,
      .assoc-stack {
        padding: 16px;
        gap: 16px;
        height: calc(92svh - var(--navbar-height) - 20px);
      }

      .charity-card,
      .assoc-card {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 14px;
      }

      .media {
        height: 520px;
      }

      .charity-card.expanded .media,
      .assoc-card.expanded .media {
        height: 260px;
      }

      .charity-card.expanded .charity-body,
      .assoc-card.expanded .assoc-body{
        padding: 0 8px;
      }

      .sa-overlay {
        height: 103%;
      }
    
      .sa-title, 
      .assoc-all-overlay .hero-title{
        font-size: clamp(30px, 9vw, 42px);
        line-height: 1.1; 
        margin-bottom: 3%;
      }
      .charity-all-overlay .hero-title {
        font-size: clamp(30px, 12vw, 45px);
        line-height: 1.5;
        margin-bottom: 8%;
      }
      .sa-overlay .hero-title {
        font-size: clamp(20px, 9vw, 40px);
        line-height: 1.1;
        margin-bottom: 5%;
      }
    }

    /* ---------- SUPPORTED ASSOCIATIONS GRID ---------- */
    @media (max-width: 900px) {
      .sa-grid-top,
      .sa-grid-bottom {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 12px;
      }

      .sa-item img {
        height: 180px;
      }
      .sa-content {
        padding: 0 16px 40px;
      }
      .btn {
        font-size: 13px;
        padding: 10px 18px;
      }
    }

    /* ---------- COMPANIES ---------- */
    @media (max-width: 900px) {
      .companies-title{
        font-size: clamp(28px, 8vw, 42px);
        line-height: 1.2;
        margin-bottom: 3%;
      }

      .companies-track {
        height: 320px;
      }

      .company-bubble {
        width: 160px;
        height: 160px;
      }

      .companies-arrow {
        width: 42px;
        height: 42px;
        bottom: 10px;
      }
    }

    /* ---------- CONTACT ---------- */
    @media (max-width: 980px) {
      .contact {
        min-height: auto;
        padding: 55px 0;
      }

      .contact-grid {
        padding: 0 16px;
      }

      .contact-copy {
        margin-bottom: 0;
      }

      .contact-form {
        width: 100%;
        margin-left: 0;
      }

      .contact-row {
        grid-template-columns: 1fr;
      }

      .contact-title {
        font-size: clamp(28px, 8vw, 40px);
        line-height: 1.2;
      }
    }

    /* ---------- BACK TO TOP / RECAPTCHA spacing on small screens ---------- */
    @media (max-width: 600px) {
      .back-to-top {
        right: 12px;
        bottom: 80px;
        width: 35px;
        height: 35px;
      }

      .recaptcha-float {
        bottom: 12px !important;
      }
      footer {
        font-size: 10px;
        padding: 20px;
      }
    }

    @font-face {
      font-family: "Balerno Serif";
      src: url("fonts/Balerno-Rg.woff2") format("woff2");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: "Balerno Serif";
      src: url("fonts/Balerno-Bd.woff2") format("woff2");
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }