:root {
   --ink: #102338;
   --muted: #5d6c7b;
   --brand: #087c78;
   --brand-dark: #075d5b;
   --accent: #d9f4ee;
   --soft: #f4f8f8;
   --line: #dce6e7;
   --white: #fff;
   --shadow: 0 18px 55px rgba(16, 35, 56, .10);
   --radius: 22px;
   --max: 1180px
}

* {
   box-sizing: border-box
}

html {
   scroll-behavior: smooth
}

body {
   margin: 0;
   color: var(--ink);
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   line-height: 1.65;
   background: #fff
}

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

a:focus-visible,
button:focus-visible {
   outline: 3px solid #f3b51b;
   outline-offset: 4px
}

.container {
   width: min(calc(100% - 40px), var(--max));
   margin-inline: auto
}

.skip-link {
   position: fixed;
   top: -100px;
   left: 20px;
   z-index: 9999;
   background: #fff;
   padding: 10px 16px;
   border-radius: 8px
}

.skip-link:focus {
   top: 12px
}

.site-header {
   position: sticky;
   top: 0;
   z-index: 1000;
   background: rgba(255, 255, 255, .94);
   backdrop-filter: blur(16px);
   transition: .25s
}

.site-header.scrolled {
   box-shadow: 0 8px 30px rgba(16, 35, 56, .09)
}

.nav-shell {
   min-height: 88px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 28px;
   transition: .25s
}

.scrolled .nav-shell {
   min-height: 72px
}

.brand {
   display: inline-flex;
   flex-direction: column;
   line-height: 1
}

.brand span {
   font-weight: 900;
   letter-spacing: .09em;
   font-size: 1.5rem;
   color: var(--brand-dark)
}

.brand small {
   font-size: .62rem;
   letter-spacing: .04em;
   color: var(--muted);
   margin-top: 6px
}

.site-nav {
   display: flex;
   align-items: center;
   gap: 8px
}

.site-nav>a,
.dropdown-toggle {
   border: 0;
   background: none;
   font: inherit;
   font-weight: 700;
   color: var(--ink);
   padding: 12px 13px;
   border-radius: 10px;
   cursor: pointer
}

.site-nav>a:hover,
.dropdown-toggle:hover,
.site-nav>a.active {
   background: var(--soft);
   color: var(--brand-dark)
}

.nav-group {
   position: relative
}

.dropdown {
   position: absolute;
   right: 0;
   top: calc(100% + 8px);
   min-width: 285px;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 14px;
   padding: 8px;
   box-shadow: var(--shadow);
   opacity: 0;
   visibility: hidden;
   transform: translateY(-5px);
   transition: .18s
}

.nav-group:hover .dropdown,
.nav-group:focus-within .dropdown,
.nav-group.open .dropdown {
   opacity: 1;
   visibility: visible;
   transform: none
}

.dropdown a {
   display: block;
   padding: 10px 12px;
   border-radius: 9px;
   font-weight: 600
}

.dropdown a:hover,
.dropdown a:focus {
   background: var(--soft);
   color: var(--brand-dark)
}

.menu-toggle {
   display: none;
   border: 0;
   background: none;
   padding: 8px
}

.menu-toggle span:not(.sr-only) {
   display: block;
   width: 26px;
   height: 2px;
   background: var(--ink);
   margin: 5px
}

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

.hero {
   position: relative;
   overflow: hidden;
   padding: 110px 0 95px;
   background: linear-gradient(135deg, #f4fbfa 0%, #fff 58%, #eef7f5 100%)
}

.hero-grid {
   display: grid;
   grid-template-columns: 1.25fr .75fr;
   gap: 70px;
   align-items: center
}

.eyebrow {
   text-transform: uppercase;
   letter-spacing: .13em;
   font-size: .76rem;
   font-weight: 900;
   color: var(--brand);
   margin: 0 0 16px
}

.hero h1,
.page-hero h1 {
   font-size: clamp(2.8rem, 6vw, 5.4rem);
   line-height: .98;
   letter-spacing: -.055em;
   margin: 0;
   max-width: 900px
}

.hero-copy {
   font-size: 1.18rem;
   color: var(--muted);
   max-width: 720px;
   margin: 28px 0
}

.actions {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   margin-top: 30px
}

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: var(--brand-dark);
   color: #fff;
   padding: 14px 20px;
   border-radius: 999px;
   font-weight: 800;
   transition: .2s;
   border: 2px solid var(--brand-dark)
}

.btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 10px 24px rgba(7, 93, 91, .2)
}

.btn-secondary {
   background: transparent;
   color: var(--brand-dark)
}

.btn-light {
   background: #fff;
   color: var(--brand-dark);
   border-color: #fff
}

.hero-panel {
   background: #0d343b;
   color: #fff;
   border-radius: var(--radius);
   padding: 14px 30px;
   box-shadow: var(--shadow)
}

.stat {
   padding: 25px 4px;
   border-bottom: 1px solid rgba(255, 255, 255, .15)
}

.stat:last-child {
   border: 0
}

.stat strong {
   display: block;
   font-size: 2.1rem
}

.stat span {
   color: #d6e6e7
}

.orb {
   position: absolute;
   border-radius: 50%;
   filter: blur(2px);
   opacity: .6
}

.orb-a {
   width: 280px;
   height: 280px;
   background: #c8efe6;
   right: -100px;
   top: -90px
}

.orb-b {
   width: 150px;
   height: 150px;
   background: #dcefe9;
   left: -70px;
   bottom: -40px
}

.section {
   padding: 96px 0
}

.section-soft {
   background: var(--soft)
}

.section-head {
   max-width: 760px;
   margin-bottom: 42px
}

.section h2 {
   font-size: clamp(2rem, 4vw, 3.2rem);
   line-height: 1.08;
   letter-spacing: -.035em;
   margin: 0 0 18px
}

.section-head>p:last-child,
.split p,
.content-narrow>p {
   color: var(--muted)
}

.cards {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px
}

.cards-four {
   grid-template-columns: repeat(4, 1fr)
}

.card {
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 30px;
   background: #fff;
   box-shadow: 0 8px 25px rgba(16, 35, 56, .04);
   transition: .25s
}

.card:hover {
   transform: translateY(-6px);
   box-shadow: var(--shadow)
}

.card h3 {
   font-size: 1.25rem;
   line-height: 1.2;
   margin: 18px 0 12px
}

.card p {
   color: var(--muted)
}

.icon {
   width: 48px;
   height: 48px;
   display: grid;
   place-items: center;
   border-radius: 13px;
   background: var(--accent);
   color: var(--brand-dark);
   font-weight: 900
}

.text-link {
   font-weight: 900;
   color: var(--brand-dark)
}

.split {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 70px;
   align-items: center
}

.quote-card,
.info-card {
   background: #0d343b;
   color: #fff;
   padding: 42px;
   border-radius: var(--radius);
   box-shadow: var(--shadow)
}

.quote-card p {
   font-size: 1.45rem;
   line-height: 1.45;
   color: #fff
}

.quote-card span {
   color: #c9dddd
}

.conference-banner {
   padding: 72px 0;
   background: linear-gradient(115deg, #075d5b, #0d343b);
   color: #fff
}

.banner-inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 30px
}

.banner-inner h2 {
   font-size: clamp(2.2rem, 5vw, 4rem);
   margin: 0
}

.banner-inner .eyebrow {
   color: #a9e7db
}

.cta {
   text-align: center;
   max-width: 800px
}

.cta p {
   color: var(--muted)
}

.page-hero {
   padding: 90px 0 75px;
   background: linear-gradient(135deg, #f2faf8, #fff)
}

.page-hero p:last-child {
   font-size: 1.15rem;
   color: var(--muted);
   max-width: 760px
}

.conference-hero {
   background: linear-gradient(135deg, #e7f7f3, #fff 70%)
}

.content-narrow {
   max-width: 850px
}

.notice {
   border: 1px solid #d6b86c;
   background: #fff9e8;
   padding: 26px;
   border-radius: 16px
}

.notice strong {
   font-size: 1.05rem
}

.notice p {
   overflow-wrap: anywhere;
   margin-bottom: 0
}

.source-note {
   font-size: .92rem
}

.info-card h2 {
   font-size: 1.6rem
}

.info-card dl {
   margin: 0
}

.info-card dl div {
   padding: 16px 0;
   border-bottom: 1px solid rgba(255, 255, 255, .15)
}

.info-card dl div:last-child {
   border: 0
}

.info-card dt {
   font-size: .78rem;
   text-transform: uppercase;
   letter-spacing: .1em;
   color: #a9e7db;
   font-weight: 800
}

.info-card dd {
   margin: 3px 0 0;
   font-weight: 700
}

.site-footer {
   background: #0b2631;
   color: #d8e3e6;
   padding: 70px 0 24px
}

.footer-grid {
   display: grid;
   grid-template-columns: 1.5fr .7fr .8fr;
   gap: 60px
}

.brand-footer span {
   color: #fff
}

.brand-footer small {
   color: #b8c8cc
}

.footer-grid h2 {
   font-size: 1rem;
   color: #fff
}

.footer-grid a:not(.brand) {
   display: block;
   margin: 8px 0;
   color: #d8e3e6
}

.footer-grid p {
   max-width: 480px;
   color: #b8c8cc
}

.footer-bottom {
   display: flex;
   justify-content: space-between;
   gap: 20px;
   border-top: 1px solid rgba(255, 255, 255, .12);
   margin-top: 50px;
   padding-top: 22px;
   font-size: .88rem
}

.footer-bottom div {
   display: flex;
   gap: 18px
}

.back-top {
   position: fixed;
   right: 22px;
   bottom: 22px;
   width: 48px;
   height: 48px;
   border: 0;
   border-radius: 50%;
   background: var(--brand-dark);
   color: #fff;
   font-size: 1.2rem;
   box-shadow: var(--shadow);
   cursor: pointer;
   opacity: 0;
   visibility: hidden;
   transform: translateY(10px);
   transition: .2s
}

.back-top.show {
   opacity: 1;
   visibility: visible;
   transform: none
}

.reveal {
   opacity: 0;
   transform: translateY(18px);
   transition: opacity .65s ease, transform .65s ease
}

.reveal.visible {
   opacity: 1;
   transform: none
}

@media(prefers-reduced-motion:reduce) {
   html {
      scroll-behavior: auto
   }

   *,
   *:before,
   *:after {
      animation: none !important;
      transition: none !important
   }

   .reveal {
      opacity: 1;
      transform: none
   }
}

@media(max-width:900px) {
   .menu-toggle {
      display: block
   }

   .site-nav {
      display: none;
      position: absolute;
      top: 100%;
      left: 20px;
      right: 20px;
      flex-direction: column;
      align-items: stretch;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 10px;
      box-shadow: var(--shadow);
      max-height: calc(100vh - 110px);
      overflow: auto
   }

   .site-nav.open {
      display: flex
   }

   .site-nav>a,
   .dropdown-toggle {
      text-align: left;
      width: 100%
   }

   .dropdown {
      position: static;
      display: none;
      opacity: 1;
      visibility: visible;
      transform: none;
      box-shadow: none;
      border: 0;
      padding: 4px 10px 8px;
      min-width: 0
   }

   .nav-group.open .dropdown {
      display: block
   }

   .nav-group:hover .dropdown:not(:focus-within) {}

   .hero-grid,
   .split {
      grid-template-columns: 1fr
   }

   .hero {
      padding: 75px 0
   }

   .cards,
   .cards-four {
      grid-template-columns: repeat(2, 1fr)
   }

   .footer-grid {
      grid-template-columns: 1fr 1fr
   }

   .footer-grid>div:first-child {
      grid-column: 1/-1
   }
}

@media(max-width:600px) {
   .container {
      width: min(calc(100% - 28px), var(--max))
   }

   .brand small {
      display: none
   }

   .nav-shell {
      min-height: 72px
   }

   .hero h1,
   .page-hero h1 {
      font-size: 2.75rem
   }

   .section {
      padding: 70px 0
   }

   .cards,
   .cards-four {
      grid-template-columns: 1fr
   }

   .banner-inner,
   .footer-bottom {
      align-items: flex-start;
      flex-direction: column
   }

   .footer-grid {
      grid-template-columns: 1fr;
      gap: 30px
   }

   .footer-grid>div:first-child {
      grid-column: auto
   }

   .quote-card,
   .info-card {
      padding: 28px
   }

   .page-hero {
      padding: 65px 0 55px
   }
}

/* 2026 brand refresh: all interface colors derive from the approved ASIRPA palette. */
:root {
   --color-dark-blue: #0B2545;
   --color-dark-red: #8B1E2D;
   --color-white: #FFFFFF;
   --color-blue-tint: #EEF2F8;
   --color-red-hover: #6E1523;
   --color-text: #1A1A2E;
   --color-blue-deep: #071A31;
   --color-border: #D7DFEA;
   --color-muted: #566477;
   --color-blue-soft: #DDE6F1;
   --ink: var(--color-text);
   --muted: var(--color-muted);
   --brand: var(--color-dark-red);
   --brand-dark: var(--color-dark-red);
   --accent: var(--color-blue-soft);
   --soft: var(--color-blue-tint);
   --line: var(--color-border);
   --white: var(--color-white);
   --shadow: 0 18px 55px rgba(11, 37, 69, .12)
}

body {
   background: var(--color-white);
   color: var(--color-text)
}

a:focus-visible,
button:focus-visible {
   outline: 3px solid var(--color-white);
   outline-offset: 3px;
   box-shadow: 0 0 0 6px var(--color-dark-red)
}

.site-header {
   background: var(--color-dark-blue);
   color: var(--color-white);
   backdrop-filter: none
}

.site-header.scrolled {
   box-shadow: 0 8px 30px rgba(11, 37, 69, .28)
}

.brand span {
   color: var(--color-white)
}

.brand span::after {
   content: "";
   display: block;
   width: 34px;
   height: 3px;
   margin-top: 5px;
   background: var(--color-dark-red);
   border-radius: 99px
}

.brand small {
   color: var(--color-blue-soft)
}

.site-nav>a,
.dropdown-toggle {
   color: var(--color-white)
}

.site-nav>a:hover,
.dropdown-toggle:hover,
.site-nav>a.active {
   background: rgba(255, 255, 255, .1);
   color: var(--color-white);
   box-shadow: inset 0 -3px 0 var(--color-dark-red)
}

.dropdown {
   background: var(--color-white);
   border-color: var(--color-border)
}

.dropdown a {
   color: var(--color-text)
}

.dropdown a:hover,
.dropdown a:focus {
   background: var(--color-blue-tint);
   color: var(--color-dark-red);
   text-decoration: underline;
   text-underline-offset: 3px
}

.menu-toggle span:not(.sr-only) {
   background: var(--color-white)
}

.hero {
   background: linear-gradient(135deg, var(--color-dark-blue), var(--color-blue-deep));
   color: var(--color-white)
}

.hero .eyebrow,
.hero h1,
.hero-copy {
   color: var(--color-white)
}

.orb {
   display: none
}

.hero-panel,
.quote-card,
.info-card {
   background: var(--color-blue-deep);
   color: var(--color-white)
}

.btn {
   background: var(--color-dark-red);
   border-color: var(--color-dark-red);
   color: var(--color-white)
}

.btn:hover {
   background: var(--color-red-hover);
   border-color: var(--color-red-hover);
   box-shadow: 0 10px 24px rgba(110, 21, 35, .25)
}

.btn-secondary {
   background: var(--color-white);
   border-color: var(--color-dark-blue);
   color: var(--color-dark-blue)
}

.hero .btn-secondary,
.conference-banner .btn-secondary {
   border-color: var(--color-white)
}

.btn-light {
   background: var(--color-white);
   border-color: var(--color-white);
   color: var(--color-dark-blue)
}

.section-soft {
   background: var(--color-blue-tint)
}

.section h2,
.card h3 {
   color: var(--color-dark-blue)
}

.eyebrow,
.text-link {
   color: var(--color-dark-red)
}

.text-link:hover {
   text-decoration: underline;
   text-underline-offset: 4px
}

.icon {
   background: var(--color-blue-tint);
   color: var(--color-dark-red)
}

.conference-banner {
   background: linear-gradient(115deg, var(--color-dark-blue), var(--color-blue-deep));
   color: var(--color-white)
}

.banner-inner .eyebrow {
   color: var(--color-white)
}

.page-hero,
.conference-hero {
   background: var(--color-blue-tint)
}

.page-hero h1 {
   color: var(--color-dark-blue)
}

.site-footer {
   background: var(--color-dark-blue);
   color: var(--color-white)
}

.brand-footer span,
.footer-grid h2 {
   color: var(--color-white)
}

.brand-footer small,
.footer-grid p {
   color: var(--color-blue-soft)
}

.footer-grid a:not(.brand) {
   color: var(--color-white)
}

.footer-grid a:hover {
   text-decoration: underline;
   text-decoration-color: var(--color-dark-red);
   text-underline-offset: 4px
}

.back-top {
   background: var(--color-dark-red);
   color: var(--color-white)
}

.back-top:hover {
   background: var(--color-red-hover)
}

/* Committee profile grid */
.committee-section {
   background: var(--color-white)
}

.committee-group+.committee-group {
   margin-top: 64px
}

.committee-group h2 {
   color: var(--color-dark-blue);
   font-size: clamp(1.8rem, 3vw, 2.5rem);
   margin-bottom: 28px
}

.committee-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 24px
}

.member-card {
   background: var(--color-white);
   border: 1px solid var(--color-border);
   border-top: 5px solid var(--color-dark-red);
   border-radius: 18px;
   padding: 26px 22px;
   box-shadow: 0 10px 30px rgba(11, 37, 69, .08);
   text-align: center;
   transition: transform .22s ease, box-shadow .22s ease
}

.member-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 18px 38px rgba(11, 37, 69, .14)
}

.member-photo {
   width: 160px;
   height: 160px;
   margin: 0 auto 22px;
   border-radius: 50%;
   overflow: hidden;
   background: var(--color-blue-tint);
   border: 1px solid var(--color-border);
   display: grid;
   place-items: center
}

.member-photo svg {
   width: 100%;
   height: 100%;
   display: block
}

.member-card h3 {
   margin: 0;
   color: var(--color-dark-blue);
   font-size: 1.15rem;
   line-height: 1.25
}

.member-role {
   margin: 7px 0 15px;
   color: var(--color-dark-red);
   font-weight: 800;
   font-size: .92rem
}

.member-bio {
   margin: 0;
   color: var(--color-muted);
   font-size: .94rem;
   line-height: 1.55
}

.committee-note {
   margin-top: 40px;
   color: var(--color-muted);
   font-size: .92rem
}

@media(max-width:900px) {
   .site-nav {
      background: var(--color-dark-blue);
      border-color: rgba(255, 255, 255, .18)
   }

   .dropdown {
      background: var(--color-white)
   }

   .committee-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }
}

@media(max-width:600px) {
   .committee-grid {
      grid-template-columns: 1fr
   }

   .member-photo {
      width: 150px;
      height: 150px
   }
}

/* =========================================================
   BY-LAWS: accessible two-level accordion
   ========================================================= */
.page-banner {
   background: var(--color-dark-blue);
   color: var(--color-white);
   padding: 64px 0 58px
}

.page-banner h1 {
   margin: 14px 0 0;
   color: var(--color-white);
   font-size: clamp(2.5rem, 5vw, 4.5rem);
   line-height: 1
}

.breadcrumb {
   display: flex;
   flex-wrap: wrap;
   gap: 9px;
   align-items: center;
   font-size: .92rem
}

.breadcrumb a {
   color: var(--color-white);
   text-decoration: underline;
   text-decoration-color: var(--color-dark-red);
   text-underline-offset: 4px
}

.breadcrumb span {
   color: var(--color-white)
}

.bylaws-wrap {
   max-width: 1040px
}

.bylaws-intro {
   font-size: 1.12rem;
   color: var(--color-text);
   margin: 0 0 24px
}

.accordion-toolbar {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   margin-bottom: 24px
}

.accordion-action {
   appearance: none;
   background: var(--color-white);
   border: 2px solid var(--color-dark-red);
   border-radius: 8px;
   color: var(--color-dark-red);
   font: inherit;
   font-weight: 800;
   padding: 9px 15px;
   cursor: pointer
}

.accordion-action:hover {
   background: var(--color-dark-red);
   color: var(--color-white)
}

.accordion-action:focus-visible,
.article-toggle:focus-visible,
.section-toggle:focus-visible {
   outline: 3px solid var(--color-dark-red);
   outline-offset: 3px;
   box-shadow: none
}

.article-accordion {
   margin-bottom: 14px
}

.article-accordion>h2,
.section-accordion>h3 {
   margin: 0
}

.article-toggle,
.section-toggle {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 18px;
   text-align: left;
   font: inherit;
   cursor: pointer
}

.article-toggle {
   border: 0;
   border-radius: 10px;
   background: var(--color-dark-blue);
   color: var(--color-white);
   font-weight: 850;
   font-size: 1.05rem;
   padding: 18px 20px
}

.article-toggle:hover {
   background: var(--color-blue-deep)
}

.accordion-icon {
   flex: 0 0 auto;
   display: inline-grid;
   place-items: center;
   font-size: 1.35rem;
   transition: transform .3s ease
}

.article-toggle[aria-expanded="true"] .accordion-icon,
.section-toggle[aria-expanded="true"] .accordion-icon {
   transform: rotate(180deg)
}

.accordion-panel {
   display: grid;
   grid-template-rows: 1fr;
   transition: grid-template-rows .35s ease
}

.accordion-panel>.accordion-panel-inner {
   overflow: hidden
}

.js .accordion-panel.is-collapsed {
   grid-template-rows: 0fr
}

.article-panel>.accordion-panel-inner {
   padding: 22px 18px 8px
}

.js .article-panel.is-collapsed>.accordion-panel-inner {
   padding-top: 0;
   padding-bottom: 0
}

.article-panel p {
   line-height: 1.75;
   margin: 0 0 16px
}

.section-accordion {
   margin: 0 0 12px 14px
}

.section-toggle {
   border: 1px solid var(--color-border);
   border-left: 4px solid var(--color-dark-red);
   border-radius: 7px;
   background: var(--color-white);
   color: var(--color-dark-blue);
   font-weight: 800;
   padding: 14px 16px
}

.section-toggle:hover {
   background: var(--color-blue-tint)
}

.section-panel>.accordion-panel-inner {
   background: var(--color-blue-tint);
   padding: 18px 20px;
   border-radius: 0 0 8px 8px
}

.js .section-panel.is-collapsed>.accordion-panel-inner {
   padding-top: 0;
   padding-bottom: 0
}

.legal-list {
   margin: 0 0 18px;
   padding-left: 28px
}

.legal-list li {
   margin: 8px 0;
   line-height: 1.7
}

.no-js .accordion-toolbar {
   display: none
}

@media(max-width:600px) {
   .page-banner {
      padding: 46px 0 42px
   }

   .article-toggle {
      padding: 16px;
      font-size: .96rem
   }

   .article-panel>.accordion-panel-inner {
      padding-left: 8px;
      padding-right: 8px
   }

   .section-accordion {
      margin-left: 5px
   }

   .section-toggle {
      padding: 13px 12px
   }

   .section-panel>.accordion-panel-inner {
      padding: 16px 14px
   }
}

@media(prefers-reduced-motion:reduce) {
   .accordion-panel {
      transition: none
   }

   .accordion-icon {
      transition: none
   }
}

@media print {

   .site-header,
   .site-footer,
   .back-top,
   .accordion-toolbar,
   .breadcrumb {
      display: none !important
   }

   .page-banner {
      background: none !important;
      color: #000 !important;
      padding: 0 0 20px
   }

   .page-banner h1 {
      color: #000 !important
   }

   .section {
      padding: 0
   }

   .bylaws-wrap {
      max-width: none
   }

   .accordion-panel,
   .js .accordion-panel.is-collapsed {
      display: block !important;
      grid-template-rows: 1fr !important
   }

   .accordion-panel>.accordion-panel-inner,
   .js .accordion-panel.is-collapsed>.accordion-panel-inner {
      overflow: visible !important;
      padding: 10px 0 !important
   }

   .article-toggle,
   .section-toggle {
      background: none !important;
      color: #000 !important;
      border: 0 !important;
      border-bottom: 1px solid #999 !important;
      padding: 10px 0 !important
   }

   .accordion-icon {
      display: none
   }

   .article-accordion {
      break-inside: avoid-page
   }

   .section-accordion {
      margin-left: 0
   }

   .section-panel>.accordion-panel-inner {
      background: none !important
   }

   .bylaws-section {
      background: #fff !important
   }
}

/* =========================================================
   COMMITTEE: accessible click/tap flip tiles
   ========================================================= */
.committee-grid {
   align-items: stretch
}

.flip-card {
   appearance: none;
   -webkit-appearance: none;
   display: block;
   width: 100%;
   min-height: 340px;
   padding: 0;
   border: 0;
   background: transparent;
   text-align: inherit;
   color: inherit;
   perspective: 1100px;
   cursor: pointer;
   border-radius: 18px;
   transition: transform .22s ease
}

.flip-card:focus-visible {
   outline: 3px solid var(--color-dark-red);
   outline-offset: 4px
}

.flip-card-inner {
   position: relative;
   width: 100%;
   height: 100%;
   min-height: 340px;
   transition: transform .6s ease;
   transform-style: preserve-3d;
   -webkit-transform-style: preserve-3d
}

.flip-card.is-flipped .flip-card-inner {
   transform: rotateY(180deg)
}

.flip-face {
   position: absolute;
   inset: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   border-radius: 18px;
   overflow: hidden;
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
   box-shadow: 0 10px 30px rgba(11, 37, 69, .10);
   border-top: 5px solid var(--color-dark-red);
   padding: 24px 20px
}

.flip-front {
   background: var(--color-white)
}

.flip-back {
   background: var(--color-dark-blue);
   color: var(--color-white);
   transform: rotateY(180deg);
   align-items: flex-start;
   text-align: left
}

.flip-card:hover {
   transform: translateY(-5px)
}

.flip-face .member-photo {
   width: 140px;
   height: 140px;
   margin: 0 auto 18px
}

.flip-face h3 {
   margin: 0;
   color: var(--color-dark-blue);
   font-size: 1.12rem;
   text-align: center
}

.flip-face .member-role {
   margin: 7px 0 10px;
   text-align: center
}

.flip-hint {
   margin: auto 0 0;
   font-size: .82rem;
   font-weight: 800;
   color: var(--color-dark-red)
}

.flip-back h3 {
   color: var(--color-white);
   text-align: left
}

.flip-back .member-role {
   color: var(--color-white);
   opacity: .82;
   text-align: left
}

.flip-back .member-bio {
   color: var(--color-white);
   overflow: auto;
   max-height: 190px;
   padding-right: 4px
}

.flip-back .flip-hint {
   color: var(--color-white);
   opacity: .82
}

.no-js .flip-card {
   min-height: auto;
   cursor: default
}

.no-js .flip-card-inner {
   min-height: auto
}

.no-js .flip-face {
   position: static
}

.no-js .flip-back {
   display: none
}

.no-js .flip-front {
   min-height: 340px
}

.no-js .member-bio-noscript {
   display: block
}

.js .member-bio-noscript {
   display: none
}

@media(prefers-reduced-motion:reduce) {
   .flip-card-inner {
      transition: opacity .15s ease;
      transform: none !important
   }

   .flip-card.is-flipped .flip-front {
      opacity: 0;
      visibility: hidden
   }

   .flip-card.is-flipped .flip-back {
      transform: none;
      opacity: 1;
      visibility: visible
   }

   .flip-back {
      transform: none;
      opacity: 0;
      visibility: hidden
   }

   .flip-card:hover {
      transform: none
   }
}

/* Committee flip-tile text elements (button-safe semantics). */
.flip-face .member-name {
   display: block;
   margin: 0;
   color: var(--color-dark-blue);
   font-size: 1.12rem;
   font-weight: 850;
   line-height: 1.25;
   text-align: center
}

.flip-back .member-name {
   color: var(--color-white);
   text-align: left
}

.member-photo img {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover
}

.committee-intro {
   font-size: 1.1rem;
   color: var(--color-muted);
   margin: 0 0 38px
}

/* FOOTER: nonprofit status placeholder statement */
.footer-nonprofit {
   margin: .35rem 0 0;
   color: rgba(255, 255, 255, .72);
   font-size: .78rem;
   line-height: 1.5
}

/* === HOME PROGRAM CARDS: Indonesia-themed image backgrounds === */
.program-image-card {
   position: relative;
   isolation: isolate;
   overflow: hidden;
   min-height: 300px;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   background-size: cover;
   background-position: center;
   border-color: rgba(255, 255, 255, .28)
}

.program-image-card::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   background: linear-gradient(180deg, rgba(11, 37, 69, .30) 0%, rgba(11, 37, 69, .78) 48%, rgba(11, 37, 69, .96) 100%)
}

.program-image-card--economic {
   background-image: url("../images/programs/economic-welfare.png")
}

.program-image-card--homecoming {
   background-image: url("../images/programs/homecoming.png")
}

.program-image-card--empowerment {
   background-image: url("../images/programs/empowerment.png")
}

.program-image-card--culture {
   background-image: url("../images/programs/culture.png")
}

.program-image-card--education {
   background-image: url("../images/programs/education.png")
}

.program-image-card h3,
.program-image-card p,
.program-image-card .text-link {
   color: var(--color-white)
}

.program-image-card p {
   color: rgba(255, 255, 255, .88)
}

.program-image-card .icon {
   background: rgba(255, 255, 255, .92);
   color: var(--color-dark-red)
}

.program-image-card .text-link {
   text-decoration-color: var(--color-white)
}

.program-image-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 18px 45px rgba(11, 37, 69, .22)
}


/* =========================================================
   HOME HERO IMAGE BACKGROUND
   Replace ../images/programs/homecoming.svg with your own
   image file whenever desired (for example: hero-indonesia.jpg).
   ========================================================= */
.hero.hero-image {
   background:
      linear-gradient(90deg,
         rgba(11, 37, 69, 0.96) 0%,
         rgba(11, 37, 69, 0.88) 38%,
         rgba(11, 37, 69, 0.68) 68%,
         rgba(11, 37, 69, 0.52) 100%),
      url("../images/programs/indonesia-hero.jpg") center / cover no-repeat;
   color: var(--color-white);
}

.hero.hero-image .hero-panel {
   background: rgba(6, 27, 52, 0.88);
   border: 1px solid rgba(255, 255, 255, 0.12);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
}

@media (max-width: 900px) {
   .hero.hero-image {
      background-position: 60% center;
   }
}

@media (max-width: 600px) {
   .hero.hero-image {
      background-image:
         linear-gradient(rgba(11, 37, 69, 0.88),
            rgba(11, 37, 69, 0.88)),
         url("../images/programs/indonesia-hero.jpg");
      background-position: center;
   }
}