/*
Theme Name: Dagbala Development Union (DDU)
Theme URI: https://dagbalaunited.org/
Author: Dagbala Development Union
Author URI: https://dagbalaunited.org/
Description: Official theme for the Dagbala Development Union (DDU/DENF) website, converted from the AppDeploy source DDU_website_1794034351548.zip (7 pages: Home, About Us, Projects, Events, Membership, Donate, Contact). Preserves the source design, content and images. Membership applications are stored for the signed-in WordPress user; Contact and Donate are preview-only until DDU confirms a recipient inbox and a payment provider. No payment is collected.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ddu
Tags: community, responsive, custom-logo, custom-menu
*/

/* DDU Phase 0 — shared site-wide design tokens and components */
/* Official uploaded identity artwork: use colored logo on light surfaces, white on dark. */
.official-logo { display:block; width:auto; object-fit:contain; }
.header-logo { width: min(310px, 29vw); height: 62px; max-width: none; object-fit: contain; object-position: left center; }
.footer-logo { width:min(100%, 300px); height:auto; max-height:110px; object-position:left center; }
.community-art-logo { display:flex; justify-content:center; align-items:center; padding:35px; background:linear-gradient(155deg,#0a357a,#1e63d6); }
.community-art-logo img { width:100%; height:100%; object-fit:contain; }
@media(max-width:900px) { .header-logo { width: min(290px, 65vw); height: 55px; } }
@media(max-width:700px) { .header-logo { width: min(250px, 68vw); height: 50px; } .community-art-logo { padding:25px; } }

:root {
  --blue-primary: #0b3d91;
  --blue-light: #1e63d6;
  --blue-deep: #082c68;
  --blue-pale: #eaf2ff;
  --red-primary: #d62828;
  --red-hover: #b71c1c;
  --white: #ffffff;
  --slate: #1f2937;
  --slate-muted: #526174;
  --gray-bg: #f3f4f6;
  --gray-line: #e4e9f0;
  --heading-font: 'Poppins', 'Inter', sans-serif;
  --body-font: 'Inter', sans-serif;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --shadow-card: 0 12px 36px rgba(8, 44, 104, 0.055);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --container: 1192px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 86px;
}
body {
  margin: 0;
  font-family: var(--body-font);
  color: var(--slate);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--blue-light);
  outline-offset: 4px;
}
img {
  display: block;
  max-width: 100%;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1,
h2,
h3 {
  font-family: var(--heading-font);
}
h2 {
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 1.24;
  letter-spacing: -0.045em;
}
p {
  line-height: 1.75;
}
.container {
  width: min(calc(100% - 48px), var(--container));
  margin-inline: auto;
}
.section {
  padding-block: 98px;
}
.skip-link {
  position: fixed;
  left: 14px;
  top: -70px;
  padding: 10px 15px;
  z-index: 100;
  background: var(--white);
  color: var(--blue-primary);
}
.skip-link:focus {
  top: 10px;
}
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  min-height: 52px;
  background: var(--red-primary);
  color: var(--white);
  border: 2px solid var(--red-primary);
  padding: 12px 25px;
  border-radius: var(--radius-sm);
  font-weight: 750;
  font-size: 13px;
  line-height: 1.3;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
  text-align: center;
}
.btn:hover {
  background: var(--red-hover);
  border-color: var(--red-hover);
  transform: translateY(-1px);
}
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
}
.btn-small {
  min-height: 43px;
  padding: 9px 19px;
  font-size: 12px;
  gap: 22px;
}
.btn-outline {
  color: var(--red-primary);
  border-color: var(--red-primary);
  background: transparent;
}
.btn-outline:hover {
  background: var(--red-hover);
  color: var(--white);
}
.btn-outline-light {
  color: var(--white);
  border-color: var(--red-primary);
  background: transparent;
}
.btn-outline-light:hover {
  background: var(--red-hover);
  color: var(--white);
}
.card {
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.section-title {
  font-family: var(--heading-font);
  color: var(--slate);
  font-size: clamp(2rem, 3vw, 2.75rem);
}
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 100px;
  font-size: 11px;
  padding: 6px 10px;
  background: var(--blue-pale);
  color: var(--blue-primary);
  font-weight: 700;
}
.grid {
  display: grid;
  gap: 24px;
}
.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.form-group {
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
}
.input {
  border: 1px solid var(--gray-line);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  width: 100%;
  background: var(--white);
  color: var(--slate);
}
.input:focus {
  outline: 2px solid var(--blue-light);
  outline-offset: 1px;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 79px;
  background: var(--white);
  border-bottom: 1px solid var(--gray-line);
  box-shadow: 0 3px 18px rgba(8, 44, 104, 0.025);
}
.nav-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.brand-mark {
  width: 43px;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 9px;
  background: var(--blue-primary);
  color: var(--white);
  font-family: var(--heading-font);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.1em;
}
.brand-mark-top {
  font-size: 19px;
  margin-left: -8px;
}
.brand-mark-bottom {
  font-size: 13px;
  margin-top: -1px;
  margin-left: 7px;
}
.brand-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.brand-copy strong {
  font: 800 20px/1 var(--heading-font);
  color: var(--blue-primary);
  letter-spacing: -0.06em;
}
.brand-copy small {
  font-size: 9px;
  color: var(--slate-muted);
  font-weight: 600;
  white-space: nowrap;
}
.desktop-nav {
  display: flex;
  align-items: center;
  gap: clamp(13px, 2.2vw, 30px);
  margin-left: auto;
}
.nav-link {
  font-size: 12px;
  font-weight: 650;
  color: #4d5a69;
  height: 79px;
  display: flex;
  align-items: center;
  position: relative;
}
.nav-link:hover,
.nav-link.active {
  color: var(--blue-primary);
}
.nav-link.active::after {
  content: '';
  height: 3px;
  background: var(--blue-light);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: 8px;
}
.menu-toggle span {
  background: var(--blue-primary);
  width: 20px;
  height: 2px;
  border-radius: 5px;
  transition:
    transform 0.2s,
    opacity 0.2s;
}
.menu-toggle[aria-expanded='true'] span:first-child {
  transform: translateY(7px) rotate(45deg);
}
.menu-toggle[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}
.menu-toggle[aria-expanded='true'] span:last-child {
  transform: translateY(-7px) rotate(-45deg);
}
.mobile-nav {
  display: none;
}
.hero {
  background: linear-gradient(112deg, #093276 0%, #0b3d91 62%, #144fad 100%);
  color: var(--white);
  min-height: 608px;
  position: relative;
  overflow: hidden;
}
.hero-decoration {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  pointer-events: none;
}
.hero-decoration-one {
  width: 550px;
  height: 550px;
  right: -250px;
  top: -310px;
}
.hero-decoration-two {
  width: 800px;
  height: 800px;
  left: -600px;
  bottom: -700px;
}
.hero-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 65px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero-content {
  max-width: 640px;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.17em;
}
.hero-eyebrow {
  color: #bfd6ff;
}
.eyebrow-line {
  width: 24px;
  height: 2px;
  background: #bfd6ff;
}
.eyebrow-blue {
  color: var(--blue-light);
}
.hero h1 {
  font-size: clamp(2.65rem, 4.3vw, 4.35rem);
  line-height: 1.16;
  letter-spacing: -0.055em;
  margin: 27px 0 22px;
  font-weight: 750;
}
.hero h1 span {
  color: #a8ccff;
}
.hero-content > p {
  color: #d3e2fc;
  font-size: 15px;
  max-width: 480px;
  line-height: 1.85;
  margin-bottom: 30px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hero-note {
  display: flex;
  gap: 13px;
  align-items: center;
  margin-top: 48px;
}
.hero-note-icon {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 100%;
  font-size: 21px;
  color: var(--white);
}
.hero-note span:last-child {
  display: grid;
  gap: 4px;
}
.hero-note strong {
  font-size: 12px;
}
.hero-note small {
  font-size: 10px;
  color: #c5d8f9;
}
.hero-visual {
  position: relative;
}
.hero-visual-frame {
  position: relative;
  border-radius: 130px 130px 20px 20px;
  border: 8px solid rgba(255, 255, 255, 0.17);
  background: #a8cbf1;
  height: 420px;
  max-width: 460px;
  margin-left: auto;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.14);
}
.community-art {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 120px 120px 12px 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #cfe6fb 0%, #b0d5f5 70%, #74a7d9 100%);
}
.art-sun {
  position: absolute;
  width: 125px;
  height: 125px;
  border-radius: 100%;
  background: #f5f9ff;
  top: 75px;
  right: 62px;
  opacity: 0.72;
  box-shadow: 0 0 0 35px rgba(255, 255, 255, 0.15);
}
.art-hill {
  position: absolute;
  width: 650px;
  height: 360px;
  border-radius: 50%;
  bottom: -275px;
  left: -120px;
}
.art-hill-back {
  background: #5c96cf;
  bottom: -245px;
  left: -190px;
}
.art-hill-front {
  background: #2b6bac;
  left: -30px;
}
.art-person {
  position: absolute;
  bottom: 52px;
  width: 65px;
  height: 142px;
  background: #123f7a;
  border-radius: 30px 30px 9px 9px;
  box-shadow: 0 20px 0 #123f7a;
}
.art-person::before {
  content: '';
  position: absolute;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: #24538d;
  top: -44px;
  left: 5px;
}
.art-person::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 88px;
  border-radius: 9px;
  background: #123f7a;
  top: 40px;
  left: -6px;
  transform: rotate(14deg);
}
.art-person.p1 {
  left: 54px;
  height: 125px;
  background: #194e8b;
}
.art-person.p2 {
  left: 141px;
  height: 165px;
  background: #0b356a;
  width: 75px;
}
.art-person.p2::before {
  background: #16477d;
  width: 62px;
  height: 62px;
  top: -51px;
}
.art-person.p3 {
  left: 239px;
  height: 145px;
  background: #2661a4;
}
.art-person.p4 {
  right: 34px;
  height: 118px;
  background: #194e8b;
  width: 59px;
}
.visual-badge {
  position: absolute;
  left: -27px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  background: var(--white);
  padding: 15px 17px;
  box-shadow: 0 9px 35px rgba(10, 25, 55, 0.18);
}
.visual-badge-icon {
  color: var(--red-primary);
  font-size: 22px;
}
.visual-badge span:last-child {
  display: grid;
  gap: 5px;
}
.visual-badge strong {
  color: var(--slate);
  font-size: 11px;
}
.visual-badge small {
  color: var(--slate-muted);
  font-size: 9px;
}
.visual-caption {
  color: #c2d5f7;
  font-size: 9px;
  letter-spacing: 0.22em;
  font-weight: 700;
  margin: 18px 0 0;
  text-align: right;
  max-width: 460px;
  margin-left: auto;
}
.trust-strip {
  border-bottom: 1px solid var(--gray-line);
  background: #f9fbfe;
}
.trust-inner {
  min-height: 87px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.trust-inner > span {
  letter-spacing: 0.16em;
  color: #738197;
  font-weight: 800;
  font-size: 10px;
}
.trust-inner > div {
  display: flex;
  gap: 11px;
  align-items: center;
  font-weight: 700;
  font-size: 13px;
  color: #243b58;
}
.mini-icon {
  display: grid;
  place-items: center;
  font-size: 9px;
  font-style: normal;
  background: #e5effc;
  color: var(--blue-primary);
  height: 30px;
  width: 30px;
  border-radius: 8px;
}
.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
}
.intro-head h2 {
  margin: 19px 0 0;
}
.intro-head em {
  font-style: normal;
  color: var(--blue-light);
}
.intro-copy p {
  color: var(--slate-muted);
  font-size: 14px;
  line-height: 1.95;
  margin-bottom: 18px;
}
.text-link {
  color: var(--red-primary);
  font-weight: 750;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--red-primary);
  padding-bottom: 7px;
}
.text-link:hover {
  color: var(--red-hover);
}
.focus-section {
  background: #f6f8fc;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 55px;
  margin-bottom: 37px;
}
.section-heading h2 {
  margin: 17px 0 0;
}
.section-heading > p {
  max-width: 350px;
  font-size: 13px;
  color: var(--slate-muted);
  margin-bottom: 7px;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.focus-card {
  padding: 30px;
  min-height: 262px;
  display: flex;
  flex-direction: column;
}
.focus-icon {
  background: var(--blue-pale);
  color: var(--blue-primary);
  height: 48px;
  width: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 25px;
}
.focus-card h3 {
  font-size: 18px;
  margin: 24px 0 9px;
}
.focus-card p {
  font-size: 12px;
  color: var(--slate-muted);
  line-height: 1.8;
  margin-bottom: 26px;
}
.card-index {
  font-size: 9px;
  color: #8b9aae;
  letter-spacing: 0.12em;
  font-weight: 750;
  margin-top: auto;
}
.preview-note {
  text-align: center;
  color: #748297;
  font-size: 11px;
  margin: 24px 0 0;
}
.system-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 75px;
}
.system-grid h2 {
  margin: 18px 0 18px;
}
.system-grid p {
  color: var(--slate-muted);
  font-size: 13px;
  max-width: 460px;
}
.system-panel {
  padding: 30px;
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.system-panel-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #79869b;
  margin-bottom: 18px;
}
.swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 30px;
}
.swatches > div {
  min-width: 0;
}
.swatch {
  display: block;
  height: 48px;
  border-radius: 8px;
  margin-bottom: 7px;
}
.swatch-primary {
  background: var(--blue-primary);
}
.swatch-light {
  background: var(--blue-light);
}
.swatch-red {
  background: var(--red-primary);
}
.swatch-neutral {
  background: var(--gray-bg);
  border: 1px solid var(--gray-line);
}
.swatches small {
  font-size: 9px;
  color: var(--slate-muted);
}
.system-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}
.cta-section {
  background: var(--blue-primary);
  color: var(--white);
  padding: 76px 0;
}
.cta-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.cta-layout h2 {
  margin: 14px 0 13px;
  font-size: clamp(2rem, 3.3vw, 3.1rem);
}
.cta-layout p {
  color: #c8dbf8;
  font-size: 13px;
  margin: 0;
}
.footer {
  background: #071f46;
  color: var(--white);
}
.footer-main {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1.5fr;
  gap: 55px;
  padding: 74px 0 63px;
}
.brand-footer .brand-mark {
  background: var(--white);
  color: var(--blue-primary);
}
.brand-footer .brand-copy strong {
  color: var(--white);
}
.brand-footer .brand-copy small {
  color: #a6bcd7;
}
.footer-about > p {
  color: #a9bdd5;
  font-size: 12px;
  max-width: 280px;
  margin: 21px 0;
}
.footer-social {
  display: flex;
  gap: 9px;
}
.footer-social a {
  height: 34px;
  width: 34px;
  border: 1px solid #355073;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 14px;
}
.footer-social a:hover {
  border-color: var(--white);
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-col h3 {
  font-family: var(--body-font);
  font-size: 12px;
  margin: 4px 0 8px;
}
.footer-col > a,
.footer-placeholder {
  font-size: 11px;
  color: #b1c4dc;
  margin: 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.footer-col > a:hover {
  color: var(--white);
}
.footer-col .footer-contact-link {
  font-weight: 750;
  color: var(--white);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid #2b4263;
  align-items: center;
  padding: 24px 0;
  color: #92accb;
  font-size: 10px;
}
.footer-bottom strong {
  color: var(--white);
  font-size: 11px;
}
.toast {
  position: fixed;
  bottom: 23px;
  right: 23px;
  z-index: 100;
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-left: 4px solid var(--blue-light);
  box-shadow: 0 14px 50px rgba(0, 0, 0, 0.18);
  border-radius: 10px;
  width: min(370px, calc(100vw - 40px));
  padding: 17px 43px 17px 18px;
  color: var(--slate);
  display: grid;
  gap: 5px;
}
.toast[hidden],
.mobile-nav[hidden] {
  display: none !important;
}
.toast strong {
  font-size: 13px;
}
.toast span {
  color: var(--slate-muted);
  font-size: 12px;
  line-height: 1.5;
}
.toast button {
  position: absolute;
  top: 8px;
  right: 8px;
  border: 0;
  background: transparent;
  font-size: 22px;
  color: var(--slate-muted);
}
@media (max-width: 1080px) {
  .desktop-nav {
    gap: 13px;
  }
  .brand-copy small {
    font-size: 8px;
  }
  .nav-link {
    font-size: 11px;
  }
  .hero-layout {
    gap: 34px;
  }
  .hero-visual-frame {
    height: 375px;
  }
  .footer-main {
    gap: 27px;
  }
}
@media (max-width: 900px) {
  .site-header {
    height: 71px;
  }
  .desktop-nav,
  .desktop-donate {
    display: none;
  }
  .menu-toggle {
    display: flex;
  }
  .mobile-nav:not([hidden]) {
    display: flex;
    position: absolute;
    top: 71px;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--white);
    padding: 12px 24px 26px;
    box-shadow: 0 20px 30px rgba(8, 44, 104, 0.14);
    border-bottom: 1px solid var(--gray-line);
    max-height: calc(100vh - 71px);
    overflow: auto;
  }
  .mobile-link {
    padding: 13px 6px;
    border-bottom: 1px solid var(--gray-line);
    font-size: 14px;
    font-weight: 650;
    color: var(--slate-muted);
  }
  .mobile-link.active {
    color: var(--blue-primary);
  }
  .mobile-donate {
    margin-top: 17px;
  }
  .hero-layout {
    grid-template-columns: 1fr 0.8fr;
    gap: 30px;
  }
  .hero h1 {
    font-size: clamp(2.7rem, 4.3vw, 4rem);
  }
  .hero-visual-frame {
    height: 325px;
    border-radius: 100px 100px 20px 20px;
  }
  .community-art {
    border-radius: 92px 92px 12px 12px;
  }
  .art-person {
    transform: scale(0.8);
    transform-origin: bottom left;
  }
  .visual-badge {
    left: -12px;
  }
  .intro-grid,
  .system-grid {
    gap: 35px;
  }
  .footer-main {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
  .footer-col:last-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 700px) {
  .container {
    width: min(calc(100% - 36px), var(--container));
  }
  .section {
    padding-block: 67px;
  }
  .hero {
    padding-block: 63px 47px;
  }
  .hero-layout {
    grid-template-columns: 1fr;
    gap: 45px;
  }
  .hero h1 {
    font-size: clamp(2.75rem, 9vw, 4.6rem);
  }
  .hero-content > p {
    font-size: 14px;
  }
  .hero-note {
    margin-top: 31px;
  }
  .hero-visual-frame {
    height: 350px;
    width: min(100% - 30px, 430px);
    margin-inline: auto;
  }
  .visual-caption {
    text-align: center;
    margin-inline: auto;
  }
  .trust-inner {
    justify-content: center;
    flex-wrap: wrap;
    padding: 23px 0;
    gap: 20px 25px;
  }
  .trust-inner > span {
    flex-basis: 100%;
    text-align: center;
  }
  .intro-grid,
  .system-grid {
    grid-template-columns: 1fr;
  }
  .intro-head h2 {
    margin-bottom: 0;
  }
  .section-heading {
    display: block;
  }
  .section-heading > p {
    margin-top: 20px;
  }
  .card-grid {
    grid-template-columns: 1fr;
  }
  .focus-card {
    min-height: 225px;
  }
  .cta-layout {
    align-items: flex-start;
    flex-direction: column;
  }
  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 42px 22px;
  }
  .footer-about {
    grid-column: 1 / -1;
  }
  .footer-col:last-child {
    grid-column: 1 / -1;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
  }
}
@media (max-width: 410px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-visual-frame {
    height: 285px;
  }
  .visual-badge {
    bottom: 12px;
    padding: 12px;
  }
  .swatches {
    grid-template-columns: repeat(2, 1fr);
  }
  .system-actions {
    flex-direction: column;
    align-items: stretch;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* Phase 1 — complete Home page. Shared Phase 0 brand, logos, navbar and footer are preserved. */
.community-art-photo { padding:0; overflow:hidden; background:#103e76; }
.community-art-photo img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.membership-photo { position:absolute; inset:0; overflow:hidden; border-radius:inherit; }
.membership-photo img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.membership-visual:has(.membership-photo) { padding:0; min-height:410px; background:#e8f1ff; }
.membership-visual:has(.membership-photo) .membership-mini-card { z-index:1; }
@media(max-width:700px) { .membership-visual:has(.membership-photo) { min-height:330px; } }

.home-hero { min-height:610px; }
.home-hero .hero-content { max-width:650px; }
.home-hero .hero-content h1 { font-size:clamp(2.7rem,4.7vw,4.6rem); }
.stat-band { padding:34px 0 41px; background:#f9fbff; border-bottom:1px solid var(--gray-line); }
.stat-band-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:26px; }
.stat-explainer { font-size:11px; color:var(--slate-muted); }
.stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.stat-item { min-width:0; text-align:center; padding:7px 12px; border-right:1px solid var(--gray-line); display:flex; flex-direction:column; align-items:center; gap:11px; }
.stat-item:last-child { border-right:0; }
.stat-value { color:var(--blue-primary); font-family:var(--heading-font); font-size:clamp(14px,1.7vw,26px); font-weight:800; line-height:1.4; overflow-wrap:anywhere; }
.stat-item > span { color:var(--slate-muted); font-weight:650; font-size:12px; }
.intro-head h2 { max-width:530px; }
.intro-rule { width:48px; height:3px; background:var(--red-primary); margin-top:23px; }
.intro-quote { margin:16px 0 0; color:var(--blue-primary); font-family:var(--heading-font); font-weight:600; font-size:14px; }
.intro-copy p strong { color:var(--slate); }
.intro-copy p + p { margin-top:7px; }
.intro-copy .btn { margin-top:7px; }
.home-focus-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.home-focus-grid .focus-card { min-height:255px; }
.focus-subnote { text-align:center; font-size:11px; color:var(--slate-muted); margin:23px 0 0; }
.section-end { max-width:360px; }
.section-end p { color:var(--slate-muted); font-size:13px; margin-bottom:12px; }
.projects-section { background:var(--white); }
.events-section { background:#f6f8fc; }
.feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.project-card { overflow:hidden; box-shadow:var(--shadow-card); }
.project-image { position:relative; height:185px; }
.photo-placeholder { background:linear-gradient(135deg,#0e498f,#6d9ed7); display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; gap:9px; font-size:11px; font-weight:700; letter-spacing:.03em; }
.photo-placeholder-two { background:linear-gradient(135deg,#165a9a,#8bb6e2); }
.photo-placeholder-three { background:linear-gradient(135deg,#12346a,#638ac3); }
.placeholder-circle { background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.3); border-radius:50%; width:60px; height:60px; display:grid; place-items:center; font-size:28px; }
.placeholder-caption { position:absolute; left:15px; top:15px; background:rgba(6,32,76,.76); padding:6px 9px; border-radius:4px; font-size:9px; letter-spacing:.09em; }
.project-body { padding:25px 24px 26px; }
.category-tag { display:inline-flex; background:var(--blue-pale); color:var(--blue-primary); border-radius:4px; font-weight:800; letter-spacing:.07em; font-size:9px; padding:7px 9px; }
.project-body h3,.event-details h3 { margin:16px 0 9px; font-size:17px; line-height:1.4; }
.project-body p,.event-details > p { color:var(--slate-muted); font-size:12px; line-height:1.8; }
.project-body .btn { margin-top:19px; }
.progress-heading { display:flex; justify-content:space-between; gap:12px; font-size:11px; color:var(--slate-muted); margin:22px 0 10px; }
.progress-heading strong { color:var(--blue-primary); }
.progress-track { width:100%; height:8px; background:#e8edf6; border-radius:20px; overflow:hidden; }
.progress-track span { display:block; height:100%; width:0; background:var(--blue-light); }
.data-disclaimer { text-align:center; color:#758399; font-size:11px; margin:22px auto 0; max-width:740px; }
.event-card { display:flex; flex-direction:column; padding:24px; min-height:350px; }
.event-date { align-self:flex-start; min-width:95px; padding:10px; border-radius:9px; border:1px solid #cbd9f2; background:#edf4ff; color:var(--blue-primary); display:flex; flex-direction:column; align-items:center; gap:3px; }
.event-date span { font-weight:800; letter-spacing:.11em; font-size:9px; }
.event-date strong { font-family:var(--heading-font); font-size:26px; line-height:1; }
.event-date small { font-weight:700; font-size:10px; }
.event-details { flex:1; display:flex; flex-direction:column; align-items:flex-start; }
.event-details .category-tag { margin-top:19px; }
.event-details h3 { margin-top:12px; }
.event-details .event-location { margin-top:auto; color:var(--blue-primary); font-weight:650; }
.event-details .btn { margin-top:12px; }
.membership-section { background:#fff; }
.membership-layout { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:90px; }
.membership-visual { position:relative; border-radius:20px; background:#e8f1ff; min-height:410px; display:grid; place-items:center; padding:60px 30px 75px; }
.membership-symbol { border-radius:50%; background:white; width:265px; height:265px; display:grid; place-items:center; padding:20px; box-shadow:0 20px 50px rgba(8,44,104,.08); }
.membership-symbol img { object-fit:contain; width:100%; height:100%; }
.membership-mini-card { position:absolute; bottom:-20px; right:-20px; padding:19px 22px; background:var(--blue-primary); border-radius:10px; color:white; display:flex; flex-direction:column; gap:7px; box-shadow:0 15px 35px rgba(8,44,104,.17); }
.membership-mini-card span { color:#bed4f8; font-size:9px; font-weight:800; letter-spacing:.09em; }
.membership-mini-card strong { font-family:var(--heading-font); font-size:18px; }
.membership-mini-card small { color:#c7daf7; font-size:10px; }
.membership-copy h2 { margin:18px 0 17px; }
.membership-copy h2 em { font-style:normal; color:var(--blue-light); }
.membership-copy > p { color:var(--slate-muted); font-size:13px; }
.benefit-list { list-style:none; margin:24px 0 29px; padding:0; display:grid; gap:15px; }
.benefit-list li { font-size:12px; color:#3e4d5e; display:flex; align-items:flex-start; gap:12px; line-height:1.7; }
.benefit-list span { flex:0 0 23px; height:23px; border-radius:50%; display:grid; place-items:center; background:var(--blue-pale); color:var(--blue-primary); font-weight:900; }
.principle-section { position:relative; overflow:hidden; background:#082c68; color:white; padding:90px 0; text-align:center; }
.principle-section::before,.principle-section::after { content:''; position:absolute; border:1px solid rgba(255,255,255,.09); border-radius:50%; width:450px; height:450px; top:-300px; left:-180px; }
.principle-section::after { left:auto; right:-180px; top:auto; bottom:-300px; }
.principle-inner { max-width:770px; position:relative; z-index:1; }
.principle-inner h2 { font-size:clamp(2.1rem,4vw,3.5rem); margin:19px auto 22px; }
.proverb-original { color:#d0e0ff; font-family:var(--heading-font); font-style:italic; font-size:clamp(15px,2vw,19px); margin:0 0 12px; }
.proverb-meaning { font-size:13px; color:#c0d3ef; margin:auto; max-width:610px; }
.donation-section { padding:82px 0; }
@media(max-width:1000px) {
  .membership-layout { gap:45px; }
  .membership-mini-card { right:-6px; }
  .project-body,.event-card { padding:20px; }
}
@media(max-width:900px) {
  .feature-grid { gap:13px; }
  .event-card { min-height:390px; }
  .project-body h3,.event-details h3 { font-size:15px; }
}
@media(max-width:700px) {
  .home-hero { padding:70px 0 50px; }
  .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:27px; }
  .stat-item:nth-child(2) { border-right:0; }
  .stat-item:nth-child(3),.stat-item:nth-child(4) { border-top:1px solid var(--gray-line); padding-top:25px; }
  .stat-band-heading { align-items:flex-start; flex-direction:column; }
  .home-focus-grid,.feature-grid { grid-template-columns:1fr; }
  .home-focus-grid .focus-card { min-height:220px; }
  .project-image { height:210px; }
  .event-card { min-height:0; }
  .membership-layout { grid-template-columns:1fr; gap:56px; }
  .membership-visual { min-height:355px; }
  .membership-symbol { width:215px; height:215px; }
  .principle-section { padding:75px 0; }
  .section-end { margin-top:20px; }
  .event-details .event-location { margin-top:12px; }
}
@media(max-width:400px) {
  .membership-mini-card { left:16px; right:16px; bottom:-28px; }
  .membership-visual { margin-bottom:26px; }
}









/* Site-wide authentication wall: no protected page content flashes before session restoration. */
html.ddu-access-checking #app,html.ddu-access-locked #app { display:none !important; }
html.ddu-access-granted #ddu-access-wall { display:none !important; }
.ddu-access-wall { position:fixed; inset:0; z-index:99999; overflow:auto; display:grid; grid-template-columns:1fr 1fr; background:#f5f8fd; font-family:Inter,system-ui,sans-serif; }
.ddu-access-intro { background:linear-gradient(135deg,#082e71,#0b3d91 72%,#1e63d6); color:white; padding:clamp(30px,7vw,100px); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.ddu-access-intro img { width:min(270px,75%); height:auto; max-height:130px; object-fit:contain; object-position:left; margin-bottom:65px; }
.ddu-access-eyebrow,.ddu-access-overline { font-size:11px; letter-spacing:.17em; font-weight:800; }
.ddu-access-eyebrow { color:#c4dcff; }
.ddu-access-intro h1 { font-family:Poppins,system-ui,sans-serif; font-size:clamp(34px,4vw,64px); letter-spacing:-.05em; line-height:1.15; margin:18px 0 22px; }
.ddu-access-intro p { font-size:15px; line-height:1.9; max-width:480px; color:#d8e8ff; }
.ddu-access-motto { margin-top:48px; font-weight:700; font-size:12px; letter-spacing:.06em; color:#c4dcff; }
.ddu-access-panel { display:grid; place-items:center; padding:32px; }
.ddu-access-card { width:min(100%,470px); padding:clamp(24px,4vw,48px); background:white; border:1px solid #e1e9f4; box-shadow:0 18px 55px rgba(11,61,145,.1); border-radius:20px; }
.ddu-access-card>img { width:64px; height:64px; object-fit:contain; margin-bottom:25px; }
.ddu-access-overline { color:#1e63d6; }
.ddu-access-card h2 { font-family:Poppins,system-ui,sans-serif; font-size:clamp(25px,2.7vw,34px); letter-spacing:-.04em; margin:14px 0; color:#0b2d63; }
.ddu-access-card>p { font-size:13px; line-height:1.8; color:#66768c; }
.ddu-access-button { width:100%; margin:21px 0; justify-content:center; background:#d62828; border-color:#d62828; }
.ddu-access-divider { display:flex; gap:14px; align-items:center; margin:7px 0 20px; color:#8491a4; font-size:10px; font-weight:800; letter-spacing:.09em; }
.ddu-access-divider:before,.ddu-access-divider:after { content:''; height:1px; flex:1; background:#e0e6ef; }
.ddu-access-card .ddu-access-explain { background:#f1f6ff; border-radius:9px; padding:15px; color:#315785; }
.ddu-access-card .ddu-access-notice { font-size:11px; }
.ddu-access-error { color:#b91c1c !important; }
.ddu-global-signout { background:transparent; color:#0b3d91; border:1px solid #b8cbe6; border-radius:7px; padding:8px 11px; font:700 11px Inter,system-ui,sans-serif; cursor:pointer; }
@media(max-width:800px) {
 .ddu-access-wall { grid-template-columns:1fr; position:fixed; }
 .ddu-access-intro { padding:33px 27px 30px; }
 .ddu-access-intro img { width:180px; margin-bottom:18px; }
 .ddu-access-intro h1 { font-size:29px; margin:10px 0; }
 .ddu-access-intro p { font-size:12px; margin:0; }
 .ddu-access-motto { margin-top:16px; font-size:10px; }
 .ddu-access-panel { padding:20px; }
 .ddu-access-card { padding:24px; }
}

/* Phase 7 — Contact & Partnerships, preserving the existing DDU brand system. */
.contact-hero { background:linear-gradient(115deg,#082c68,#0b3d91 68%,#1e63d6); color:white; padding:78px 0; overflow:hidden; }
.contact-hero-layout { display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:center; }
.contact-hero h1 { font-size:clamp(2.7rem,5.1vw,4.8rem); line-height:1.13; letter-spacing:-.05em; margin:20px 0; }
.contact-hero h1 span { color:#bcd7ff; }
.contact-hero p { color:#dce8fb; max-width:580px; font-size:14px; margin-bottom:25px; }
.contact-hero-graphic { width:min(100%,340px); aspect-ratio:1; border-radius:50%; border:1px solid rgba(255,255,255,.19); background:rgba(255,255,255,.07); padding:40px; justify-self:center; display:grid; place-items:center; }
.contact-hero-graphic img { width:100%; height:100%; object-fit:contain; }
.contact-main-section { background:#f7f9fd; }
.contact-layout { display:grid; grid-template-columns:.87fr 1.13fr; gap:65px; align-items:start; }
.contact-information h2 { margin:16px 0 18px; }
.contact-information>p { color:var(--slate-muted); font-size:13px; }
.contact-info-list { margin-top:35px; display:grid; gap:18px; }
.contact-info-item { display:flex; gap:16px; padding:17px 0; border-bottom:1px solid #dce4ef; align-items:start; }
.contact-icon { flex:0 0 45px; height:45px; display:grid; place-items:center; background:var(--blue-pale); color:var(--blue-primary); border-radius:10px; font-size:23px; }
.contact-info-item h3 { margin:0 0 7px; font-size:14px; }
.contact-info-item p { color:var(--slate); font-size:12px; margin:0 0 4px; overflow-wrap:anywhere; }
.contact-info-item small { color:var(--slate-muted); font-size:10px; }
.contact-social-panel { background:#eaf2ff; border-radius:12px; padding:22px; margin-top:29px; }
.contact-social-panel h3 { font-size:15px; margin-bottom:8px; }
.contact-social-panel p { font-size:12px; color:var(--slate-muted); }
.contact-social-links { display:flex; flex-wrap:wrap; gap:8px; }
.contact-social-links span { font-size:10px; background:white; color:var(--blue-primary); border-radius:7px; padding:9px 10px; font-weight:700; }
.contact-form-card { border:1px solid var(--gray-line); border-radius:18px; padding:32px; background:white; box-shadow:var(--shadow-card); }
.contact-form-intro h3 { margin:13px 0 11px; font-size:23px; }
.contact-form-intro p { font-size:12px; color:var(--slate-muted); }
.contact-preview-warning { display:grid; gap:5px; background:#fff1f1; border-left:3px solid var(--red-primary); border-radius:7px; padding:13px; margin:21px 0; }
.contact-preview-warning strong { font-size:12px; color:#ad2222; }
.contact-preview-warning span { font-size:11px; line-height:1.7; color:#775253; }
.contact-delivery-note { display:grid; gap:5px; background:var(--blue-pale); border-left:3px solid var(--blue-light); border-radius:7px; padding:13px; margin:21px 0; }
.contact-delivery-note strong { font-size:12px; color:var(--blue-primary); }
.contact-delivery-note span { font-size:11px; line-height:1.7; color:var(--slate-muted); }
#contact-preview-form label:not(.contact-consent) { display:grid; gap:8px; font-size:12px; font-weight:750; margin-bottom:17px; }
#contact-preview-form :is(input:not([type=checkbox]),select,textarea) { width:100%; background:white; border:1px solid #cfdae9; border-radius:8px; min-height:44px; padding:11px 12px; color:var(--slate); font:400 13px var(--body-font); }
#contact-preview-form textarea { min-height:130px; resize:vertical; }
.contact-form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.contact-consent { display:flex; align-items:flex-start; gap:10px; font-size:11px; color:var(--slate-muted); line-height:1.6; margin:22px 0; }
.contact-consent input { width:17px; height:17px; flex:0 0 17px; accent-color:var(--blue-primary); }
.contact-submit { width:100%; }
.contact-form-footnote { font-size:10px; color:var(--slate-muted); text-align:center; margin:12px 0 0; }
.contact-preview-result { background:#e8f1ff; padding:17px; border-radius:9px; margin-top:18px; color:var(--blue-primary); display:grid; gap:7px; }
.contact-preview-result[hidden] { display:none; }
.contact-preview-result strong { font-size:13px; }
.contact-preview-result p { font-size:12px; color:var(--slate-muted); margin:0; }
.contact-partner-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.contact-partner-card { padding:24px; }
.contact-partner-card h3 { font-size:15px; }
.contact-partner-card p { font-size:12px; color:var(--slate-muted); margin:0; }
.contact-partner-cta { display:flex; gap:25px; align-items:center; justify-content:space-between; background:#eaf2ff; padding:29px; border-radius:13px; margin-top:25px; }
.contact-partner-cta h3 { font-size:19px; margin:0 0 8px; }
.contact-partner-cta p { font-size:12px; color:var(--slate-muted); max-width:590px; margin:0; }
.contact-partner-cta .btn { flex:0 0 auto; }
.contact-location { background:#f5f8fc; }
.contact-location-layout { display:grid; grid-template-columns:1fr 1fr; gap:65px; align-items:center; }
.contact-location-layout h2 { margin:16px 0; }
.contact-location-layout p { color:var(--slate-muted); font-size:13px; }
.contact-location-layout .contact-address-note { font-weight:750; color:var(--blue-primary); }
.contact-photo { border-radius:17px; overflow:hidden; height:325px; }
.contact-photo img { height:100%; width:100%; object-fit:cover; }
@media(max-width:1050px) { .contact-layout,.contact-location-layout { gap:34px; } .contact-partner-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) {
 .contact-hero { padding:65px 0; }
 .contact-hero-layout,.contact-layout,.contact-location-layout { grid-template-columns:1fr; }
 .contact-hero-graphic { width:175px; padding:24px; }
 .contact-form-row,.contact-partner-grid { grid-template-columns:1fr; }
 .contact-form-card { padding:21px; }
 .contact-partner-cta { flex-direction:column; align-items:flex-start; }
 .contact-partner-cta .btn { width:100%; }
 .contact-photo { height:235px; }
}

/* Phase 6: Donate & transparency. Payment processing is intentionally disabled. */
.donation-hero { color:#fff; padding:77px 0; background:linear-gradient(115deg,#082c68,#0b3d91 72%,#1e63d6); }
.donation-hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center; }
.donation-hero h1 { font-size:clamp(2.6rem,5vw,4.7rem); letter-spacing:-.05em; line-height:1.13; margin:17px 0; }
.donation-hero h1 span { color:#bcd7ff; }
.donation-hero p { font-size:14px; color:#d8e7fe; max-width:580px; margin-bottom:25px; }
.donation-hero-photo { height:360px; border:7px solid rgba(255,255,255,.15); border-radius:20px; overflow:hidden; }
.donation-hero-photo img { width:100%; height:100%; object-fit:cover; }
.donation-priority-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:19px; }
.donation-priority { padding:28px; }
.donation-priority h3 { font-size:18px; }
.donation-priority p { font-size:12px; color:var(--slate-muted); }
.donation-form-section { background:#f5f8fc; }
.donation-form-grid { display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; align-items:start; }
.donation-form-grid h2 { margin:15px 0 22px; }
.donation-form-grid>div:first-child>p { color:var(--slate-muted); font-size:13px; }
.donation-readiness { padding:22px; border-left:4px solid var(--red-primary); background:white; border-radius:8px; margin-top:28px; }
.donation-readiness strong { font-size:13px; }
.donation-readiness p { color:var(--slate-muted); font-size:12px; margin:7px 0 0; }
.donation-impact-stat { padding:20px; background:#e8f1ff; border-radius:12px; margin-top:25px; display:flex; flex-direction:column; gap:6px; }
.donation-impact-stat strong { font:800 37px var(--heading-font); color:var(--blue-primary); }
.donation-impact-stat p { color:var(--slate-muted); font-size:11px; margin:0; }
.donation-selection-panel { background:white; border:1px solid var(--gray-line); border-radius:18px; padding:30px; box-shadow:var(--shadow-card); }
.donation-panel-head { display:flex; gap:10px; justify-content:space-between; align-items:center; margin-bottom:27px; flex-wrap:wrap; }
.donation-panel-head h3 { font-size:20px; margin:0; }
.donation-panel-head span { font-size:10px; color:var(--red-primary); background:#fff0f0; padding:7px 9px; border-radius:6px; font-weight:800; }
.donation-amount-fieldset { margin:0 0 19px; padding:0; border:0; }
.donation-amount-fieldset legend,.donation-field-label { color:var(--slate); display:block; font-size:12px; font-weight:800; margin-bottom:11px; }
.donation-amount-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.donation-amount-grid label { position:relative; }
.donation-amount-grid input { position:absolute; width:1px; height:1px; opacity:0; }
.donation-amount-grid span { display:block; padding:13px; border:1px solid #cbd8ea; border-radius:9px; font-weight:750; color:var(--blue-primary); font-size:14px; text-align:center; cursor:pointer; }
.donation-amount-grid input:checked+span { background:var(--blue-primary); border-color:var(--blue-primary); color:white; }
.donation-amount-grid input:focus-visible+span { outline:3px solid var(--blue-light); outline-offset:3px; }
.donation-custom-wrap { display:flex; border:1px solid #cbd8ea; border-radius:8px; overflow:hidden; align-items:center; margin-bottom:18px; }
.donation-custom-wrap span { background:#f3f7fc; padding:13px 17px; font-weight:800; color:var(--blue-primary); }
.donation-custom-wrap input { border:0; padding:12px; min-height:45px; width:100%; min-width:0; font:inherit; }
.donation-selection-panel select { width:100%; padding:12px; min-height:46px; margin-bottom:17px; border:1px solid #cbd8ea; border-radius:8px; background:white; color:var(--slate); font:inherit; font-size:13px; }
.donation-summary { background:#e9f2ff; border-radius:10px; padding:20px; display:grid; gap:7px; margin:4px 0 17px; }
.donation-summary span { font-size:10px; color:var(--blue-primary); font-weight:800; letter-spacing:.06em; }
.donation-summary strong { font:800 29px var(--heading-font); color:var(--blue-primary); }
.donation-summary small { font-size:11px; color:var(--slate-muted); }
.donation-pay-button { width:100%; background:#cbd5e1; border-color:#cbd5e1; color:#344256; cursor:not-allowed; }
.donation-pay-button:hover { background:#cbd5e1; border-color:#cbd5e1; transform:none; }
.donation-fineprint { color:var(--slate-muted); text-align:center; font-size:11px; margin:13px 0 0; }
.donation-error { color:#b91c1c; font-size:11px; }
.donation-transparency { background:white; }
.donation-financial-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:30px 0; }
.donation-financial-summary article { display:grid; gap:8px; padding:21px; background:#f4f8ff; border:1px solid var(--gray-line); border-radius:12px; }
.donation-financial-summary span { font-size:11px; color:var(--slate-muted); }
.donation-financial-summary strong { font:800 clamp(21px,2vw,30px) var(--heading-font); color:var(--blue-primary); }
.donation-financial-summary small { font-size:10px; color:var(--slate-muted); }
.donation-transparency-layout { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.donation-transparency-panel { border:1px solid var(--gray-line); border-radius:15px; padding:27px; }
.donation-transparency-panel h3 { font-size:18px; margin:10px 0 18px; }
.donation-no-data { min-height:210px; display:grid; align-content:center; justify-items:center; text-align:center; padding:22px; background:#f7faff; border:1px dashed #bcd0ea; border-radius:10px; }
.donation-no-data>span { font-size:33px; color:var(--blue-light); }
.donation-no-data strong { font-size:13px; margin-top:12px; }
.donation-no-data p { font-size:11px; max-width:350px; color:var(--slate-muted); margin-bottom:0; }
.donation-record-list { border-top:1px solid var(--gray-line); }
.donation-record-list div { display:flex; justify-content:space-between; gap:10px; align-items:center; border-bottom:1px solid var(--gray-line); padding:18px 0; }
.donation-record-list strong { font-size:12px; }
.donation-record-list span { color:var(--slate-muted); font-size:10px; }
.donation-report-note { font-size:11px; color:var(--slate-muted); margin-top:20px; }
.donation-process { background:#f5f8fc; }
.donation-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.donation-steps article { padding:27px; background:white; border:1px solid var(--gray-line); border-radius:14px; }
.donation-steps article>span { display:grid; place-items:center; background:var(--blue-pale); color:var(--blue-primary); font-size:12px; font-weight:800; width:39px; height:39px; border-radius:9px; margin-bottom:20px; }
.donation-steps h3 { font-size:17px; }
.donation-steps p { font-size:12px; color:var(--slate-muted); }
@media(max-width:950px) {
 .donation-hero-grid,.donation-form-grid { gap:35px; }
 .donation-financial-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px) {
 .donation-hero-grid,.donation-form-grid,.donation-transparency-layout { grid-template-columns:1fr; }
 .donation-hero { padding:64px 0; }
 .donation-hero-photo { height:250px; }
 .donation-priority-grid,.donation-steps { grid-template-columns:1fr; }
 .donation-selection-panel { padding:21px; }
 .donation-financial-summary { grid-template-columns:1fr 1fr; gap:8px; }
 .donation-financial-summary article { padding:14px; }
 .donation-financial-summary strong { font-size:19px; }
 .donation-record-list div { flex-direction:column; align-items:flex-start; }
}

/* Phase 5 Membership: maintains the DDU palette without gold. */
.member-hero { padding:76px 0; background:linear-gradient(120deg,#092e6f,#0b3d91 74%,#1d62d3); color:white; }
.member-hero-grid { display:grid; grid-template-columns:1fr 0.9fr; align-items:center; gap:65px; }
.member-hero h1 { font-size:clamp(2.7rem,4.9vw,4.7rem); line-height:1.12; letter-spacing:-.055em; margin:18px 0 20px; }
.member-hero h1 span { color:#bcd7ff; }
.member-hero p { color:#d7e6fc; font-size:14px; max-width:590px; margin-bottom:26px; }
.member-hero-image { border-radius:18px; overflow:hidden; border:7px solid rgba(255,255,255,.13); height:355px; box-shadow:0 25px 55px rgba(0,0,0,.13); }
.member-hero-image img { width:100%; height:100%; object-fit:cover; }
.member-benefits-section { background:#fff; }
.member-benefits-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.member-benefit { padding:27px; }
.member-benefit-icon { display:grid; place-items:center; width:46px; height:46px; border-radius:12px; color:var(--blue-primary); background:var(--blue-pale); font-size:25px; margin-bottom:20px; }
.member-benefit h3 { font-size:16px; margin-bottom:8px; }
.member-benefit p { font-size:12px; color:var(--slate-muted); margin-bottom:0; }
.member-account-section { background:#f5f8fd; }
.member-account-grid { display:grid; grid-template-columns:0.87fr 1.13fr; align-items:start; gap:65px; }
.member-account-intro h2 { margin:15px 0 18px; }
.member-account-intro>p { color:var(--slate-muted); font-size:13px; }
.member-steps { padding:0; margin:30px 0; list-style:none; display:grid; gap:25px; }
.member-steps li { display:flex; gap:16px; align-items:flex-start; }
.member-steps li>span { flex:0 0 38px; height:38px; display:grid; place-items:center; background:#e3edfc; border-radius:11px; font-weight:800; font-size:12px; color:var(--blue-primary); }
.member-steps strong { font-size:14px; }
.member-steps p { color:var(--slate-muted); font-size:12px; margin:4px 0 0; }
.member-privacy-tip { border-left:3px solid var(--blue-light); padding:12px 15px; background:#e9f2ff; }
.member-panel { background:white; border:1px solid var(--gray-line); border-radius:18px; padding:34px; box-shadow:0 14px 35px rgba(8,44,104,.06); min-width:0; }
.member-panel [hidden] { display:none!important; }
.member-loading { color:var(--slate-muted); font-size:13px; }
.member-panel-icon { display:grid; place-items:center; border-radius:50%; background:var(--blue-pale); color:var(--blue-primary); width:75px; height:75px; font-size:38px; margin-bottom:21px; }
.member-panel h3 { font-size:21px; margin:13px 0; }
.member-panel p { font-size:12px; color:var(--slate-muted); }
.member-small-note { margin:16px 0 0; }
.member-full-btn { width:100%; margin-top:10px; }
.member-user-bar { display:flex; align-items:center; gap:12px; justify-content:space-between; padding-bottom:20px; margin-bottom:24px; border-bottom:1px solid var(--gray-line); }
.member-user-bar>div { min-width:0; display:grid; gap:7px; }
.member-user-bar strong { font-size:12px; overflow-wrap:anywhere; }
.member-signout { color:var(--red-primary); font-size:12px; border:1px solid #edbdc3; background:#fff; border-radius:7px; padding:10px 12px; font-weight:700; }
.member-signout:hover { background:#fff5f5; }
.member-status { display:inline-flex; padding:8px 11px; font-weight:800; font-size:11px; background:#e6efff; border-radius:6px; color:var(--blue-primary); }
.member-status-new { background:#f0f4fa; color:#536982; }
#member-application-form label { display:grid; gap:8px; font-size:12px; font-weight:750; margin-bottom:17px; }
#member-application-form :is(input:not([type=checkbox]),select) { min-height:45px; width:100%; border:1px solid #cfdae9; border-radius:8px; padding:10px 12px; font-size:13px; font-weight:400; color:var(--slate); background:white; }
.member-form-heading { margin-bottom:25px; }
.member-form-heading p { margin-bottom:0; }
#member-application-form .member-consent { display:flex; gap:11px; align-items:flex-start; font-weight:500; line-height:1.5; }
.member-consent input { width:17px; height:17px; margin-top:1px; flex:0 0 17px; accent-color:var(--blue-primary); }
.member-consent span { font-size:12px; }
.member-cancel { display:block; margin:13px auto 0; padding:8px 10px; border:0; background:transparent; color:var(--blue-primary); font-weight:700; font-size:12px; }
.member-profile-list { margin:22px 0; display:grid; gap:0; }
.member-profile-list div { display:flex; justify-content:space-between; gap:20px; padding:13px 0; border-bottom:1px solid var(--gray-line); }
.member-profile-list dt { color:var(--slate-muted); font-size:12px; }
.member-profile-list dd { color:var(--slate); margin:0; font-size:12px; text-align:right; font-weight:700; overflow-wrap:anywhere; }
.member-feedback { padding:13px 15px; margin-top:16px; border-radius:9px; background:#e6f0ff; color:var(--blue-primary); font-size:12px; line-height:1.6; }
.member-feedback.is-error { background:#fff0f0; color:#ac2222; }
.member-faq-section { background:#fff; }
.member-faq-grid { display:grid; grid-template-columns:0.8fr 1.2fr; gap:60px; }
.member-faq-grid>div>p { font-size:13px; color:var(--slate-muted); }
.member-faq-items { border-top:1px solid var(--gray-line); }
.member-faq-items details { border-bottom:1px solid var(--gray-line); padding:18px 0; }
.member-faq-items summary { font-size:14px; font-weight:750; color:var(--slate); cursor:pointer; }
.member-faq-items details p { color:var(--slate-muted); font-size:12px; margin:13px 0 0; }
@media(max-width:1000px) { .member-hero-grid,.member-account-grid { gap:35px; } .member-benefits-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) {
 .member-hero-grid,.member-account-grid,.member-faq-grid { grid-template-columns:1fr; }
 .member-hero { padding:65px 0; }
 .member-hero-image { height:245px; }
 .member-benefits-grid { grid-template-columns:1fr; }
 .member-benefit { padding:22px; }
 .member-panel { padding:23px; }
 .member-user-bar { align-items:flex-start; }
 .member-profile-list div { flex-direction:column; gap:6px; }
 .member-profile-list dd { text-align:left; }
}

/* Phase 4: Events & Calendar — shared DDU blue/red design foundation. */
.events-hero { position:relative; overflow:hidden; color:#fff; padding:82px 0 90px; background:linear-gradient(115deg,#082c68,#0b3d91 65%,#1e63d6); }
.events-hero::after { content:''; position:absolute; width:580px; height:580px; border:1px solid rgba(255,255,255,.12); border-radius:50%; right:-180px; top:-300px; }
.events-hero-inner { position:relative; z-index:1; }
.events-hero h1 { font-size:clamp(2.6rem,5vw,4.8rem); line-height:1.15; letter-spacing:-.055em; margin:18px 0 20px; }
.events-hero h1 span { color:#bcd6ff; }
.events-hero p { color:#d8e8ff; max-width:620px; font-size:15px; }
.events-hero-notice { display:inline-flex; margin-top:15px; border:1px solid rgba(255,255,255,.28); border-radius:30px; padding:9px 13px; color:#dfebff; font-size:11px; }
.events-overview { padding:33px 0; background:#f6f9ff; border-bottom:1px solid var(--gray-line); }
.events-overview-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.events-overview-grid>div { border-right:1px solid var(--gray-line); display:grid; gap:7px; text-align:center; padding:10px 15px; }
.events-overview-grid>div:last-child { border-right:0; }
.events-overview-grid strong { color:var(--blue-primary); font:700 clamp(15px,2vw,24px) var(--heading-font); }
.events-overview-grid span { color:var(--slate-muted); font-size:11px; }
.events-section-heading { align-items:flex-end; }
.events-layout { display:grid; grid-template-columns:1.35fr .65fr; gap:23px; }
.events-calendar-panel,.events-side-panel { border:1px solid var(--gray-line); border-radius:18px; background:white; box-shadow:var(--shadow-card); padding:26px; min-width:0; }
.events-calendar-toolbar { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:22px; }
.events-calendar-toolbar h3 { margin:8px 0 0; font-size:23px; }
.events-month-buttons { display:flex; gap:6px; }
.events-month-buttons button { padding:7px 12px; min-height:36px; border:1px solid #d1ddeb; background:#f5f8fe; color:var(--blue-primary); border-radius:8px; font-weight:800; }
.events-month-buttons button:hover { background:var(--blue-pale); }
.events-weekdays,.events-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.events-weekdays { text-align:center; font-size:11px; color:var(--slate-muted); font-weight:800; margin-bottom:9px; }
.events-calendar-day { border:1px solid transparent; min-height:66px; border-radius:9px; color:var(--slate); font-weight:650; font-size:12px; background:#f7faff; display:flex; align-items:flex-start; justify-content:flex-end; padding:10px; }
.events-calendar-day:hover { border-color:#acc6ee; background:#eaf2ff; }
.events-calendar-day.is-today { border-color:var(--blue-light); color:var(--blue-primary); }
.events-calendar-day.is-selected { background:var(--blue-primary); color:white; }
.events-calendar-day.is-outside { opacity:.34; }
.events-calendar-day:disabled { cursor:default; }
.events-calendar-key { display:flex; gap:19px; flex-wrap:wrap; align-items:center; margin-top:20px; color:var(--slate-muted); font-size:11px; }
.events-calendar-key span { display:inline-flex; align-items:center; gap:7px; }
.events-dot { width:8px; height:8px; background:var(--blue-light); border-radius:50%; display:inline-block; }
.events-dot.event { background:var(--red-primary); }
.events-pending-note { margin:17px 0 0; color:#738197; font-size:11px; }
.events-side-panel { display:flex; flex-direction:column; gap:10px; background:#f9fbff; }
.events-side-panel h3 { font-size:23px; margin:4px 0; }
.events-side-panel > p { color:var(--slate-muted); font-size:12px; }
.events-empty-date { text-align:center; padding:30px 14px; border:1px dashed #c2d3ed; border-radius:13px; background:#fff; display:grid; justify-items:center; gap:9px; }
.events-empty-symbol { font-size:37px; color:var(--blue-light); }
.events-empty-date strong { font-size:13px; }
.events-empty-date p { font-size:11px; color:var(--slate-muted); margin:0; }
.events-side-footer { margin-top:auto; border-top:1px solid var(--gray-line); padding-top:25px; }
.events-side-footer strong { color:var(--blue-primary); font-size:14px; }
.events-side-footer p { font-size:12px; color:var(--slate-muted); }
.events-list-section { background:#f6f8fc; }
.events-filter-bar { display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; align-items:center; background:white; border:1px solid var(--gray-line); padding:17px; border-radius:14px; }
.events-filters { display:flex; gap:9px; flex-wrap:wrap; }
.events-filters button { background:#f5f8fc; color:var(--blue-primary); border:1px solid #d8e3f2; padding:10px 15px; border-radius:8px; font-size:12px; font-weight:750; }
.events-filters button.is-active { background:var(--blue-primary); color:white; border-color:var(--blue-primary); }
.events-search input { padding:11px 13px; min-width:210px; border:1px solid #cbd8ea; border-radius:8px; width:100%; font-size:12px; }
.events-filter-count { font-size:12px; color:var(--slate-muted); margin:18px 0; }
.events-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.events-card { background:white; border:1px solid var(--gray-line); border-radius:17px; overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-card); }
.events-card-visual { min-height:160px; background:linear-gradient(140deg,#103d81,#6c9cdb); color:white; display:grid; place-items:center; position:relative; }
.events-card-visual .events-visual-symbol { font-size:38px; width:72px; height:72px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.13); }
.events-card-sample { position:absolute; left:13px; top:13px; padding:7px 9px; border-radius:5px; font-size:9px; font-weight:800; background:rgba(8,32,74,.78); }
.events-card-content { padding:23px; display:flex; flex-direction:column; flex:1; }
.events-card-content h3 { font-size:18px; margin:15px 0 9px; }
.events-card-content>p { color:var(--slate-muted); font-size:12px; }
.events-card-meta { display:grid; gap:9px; padding:14px 0; border-top:1px solid var(--gray-line); border-bottom:1px solid var(--gray-line); color:var(--slate-muted); font-size:11px; margin-top:auto; }
.events-card-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.events-card-actions button { flex:1; min-width:115px; }
.events-card-actions .events-secondary { background:white; color:var(--red-primary); }
.events-card-actions .events-secondary:hover { background:var(--red-hover); color:white; }
.events-list-disclaimer { text-align:center; color:#697a91; font-size:11px; margin:25px auto 0; max-width:850px; }
.events-empty-state { background:white; border-radius:15px; padding:55px 15px; text-align:center; }
.events-empty-state[hidden] { display:none; }
.events-empty-state p { color:var(--slate-muted); }
.events-community-banner { background:var(--blue-primary); color:white; padding:75px 0; }
.events-community-layout { display:flex; justify-content:space-between; align-items:center; gap:35px; }
.events-community-layout h2 { margin:13px 0; font-size:clamp(2rem,3.3vw,3rem); }
.events-community-layout p { color:#d1e1fa; font-size:13px; }
.event-detail-dialog { padding:0; border:0; border-radius:17px; width:min(620px,calc(100% - 28px)); max-height:90vh; overflow:auto; box-shadow:0 20px 80px rgba(0,0,0,.25); }
.event-detail-dialog::backdrop { background:rgba(8,27,59,.7); }
.event-dialog-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding:24px 27px 19px; border-bottom:1px solid var(--gray-line); }
.event-dialog-heading h2 { font-size:23px; margin:8px 0 0; }
.event-dialog-heading button { display:grid; place-items:center; border:0; border-radius:50%; background:#eaf2ff; color:var(--blue-primary); width:39px; height:39px; font-size:26px; }
#event-dialog-content,.event-rsvp-form { padding:25px 27px 30px; }
.event-dialog-banner { padding:40px 20px; background:linear-gradient(130deg,#0b3d91,#6f9cdd); color:white; border-radius:12px; text-align:center; margin-bottom:20px; }
.event-dialog-banner strong { display:block; font-size:38px; }
.event-dialog-banner span { font-size:12px; }
.event-dialog-description { color:var(--slate-muted); font-size:13px; }
.event-detail-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; margin:21px 0; }
.event-detail-meta div { display:grid; gap:7px; padding:14px; border-radius:9px; background:#f5f8fc; }
.event-detail-meta span { color:var(--slate-muted); font-size:11px; }
.event-detail-meta strong { color:var(--blue-primary); font-size:12px; }
.events-warning { background:#eaf2ff; color:var(--blue-primary); border-radius:8px; padding:12px; font-size:12px; }
.event-rsvp-title { font-weight:750; }
.event-rsvp-form label { display:grid; gap:7px; margin-bottom:15px; font-size:12px; font-weight:700; }
.event-rsvp-form :is(input,select) { border:1px solid #cbd8e9; border-radius:8px; min-height:43px; padding:10px 12px; font-size:13px; width:100%; }
.events-form-result { padding:13px; border-radius:8px; color:var(--blue-primary); background:#e9f2ff; font-size:12px; margin:15px 0 0; }
.events-form-result[hidden] { display:none; }
@media(max-width:900px) { .events-layout { grid-template-columns:1fr; } .events-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) {
 .events-hero { padding:65px 0; }
 .events-overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 0; }
 .events-overview-grid>div:nth-child(2) { border-right:0; }
 .events-calendar-panel,.events-side-panel { padding:17px; }
 .events-calendar-day { min-height:44px; padding:7px; font-size:11px; }
 .events-weekdays,.events-calendar-grid { gap:3px; }
 .events-month-buttons button { padding:6px 9px; }
 .events-calendar-toolbar h3 { font-size:19px; }
 .events-cards { grid-template-columns:1fr; }
 .events-search { width:100%; }
 .events-community-layout { align-items:flex-start; flex-direction:column; }
 .event-detail-meta { grid-template-columns:1fr; }
}

/* Phase 3: Projects & Development Tracker; CSS is additive to shared design. */
.project-page-hero { color:white; background:linear-gradient(112deg,#092d6b,#0b3d91 70%,#1e63d6); padding:80px 0 85px; }
.project-page-hero-content { max-width:1150px; }
.project-page-hero h1 { font-size:clamp(2.7rem,5.1vw,4.75rem); margin:15px 0 16px; letter-spacing:-.05em; line-height:1.15; }
.project-page-hero h1 span { color:#b7d5ff; }
.project-page-hero p { font-size:15px; line-height:1.8; color:#d8e6fc; max-width:680px; }
.project-notice { display:inline-flex; font-size:11px; color:#dce8fa; border:1px solid rgba(255,255,255,.25); border-radius:99px; padding:9px 14px; margin-top:15px; }
.project-summary { background:#f7faff; padding:39px 0 42px; border-bottom:1px solid var(--gray-line); }
.project-summary-title { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:24px; }
.project-summary-title>span:last-child { color:var(--slate-muted); font-size:11px; }
.project-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.project-summary-grid article { padding:15px 22px; display:flex; flex-direction:column; gap:9px; border-right:1px solid #d8e3f2; }
.project-summary-grid article:last-child { border-right:0; }
.project-summary-grid strong { color:var(--blue-primary); font:800 clamp(17px,2vw,29px)/1.3 var(--heading-font); }
.project-summary-grid span { color:var(--slate); font-size:13px; font-weight:750; }
.project-summary-grid small { color:var(--slate-muted); font-size:10px; }
.project-heading { align-items:end; }
.project-filters { padding:22px; background:#f7faff; border:1px solid var(--gray-line); border-radius:16px; margin:35px 0 19px; }
.project-tabs { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:17px; }
.project-tab { border:1px solid #cdd9e9; color:var(--blue-primary); background:white; font-size:12px; padding:11px 15px; border-radius:9px; font-weight:700; }
.project-tab:hover,.project-tab:focus-visible { border-color:var(--blue-primary); }
.project-tab.is-active { background:var(--blue-primary); color:white; border-color:var(--blue-primary); }
.project-control-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(170px,220px); gap:12px; }
.project-search-label { position:relative; }
.project-search-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--slate-muted); font-size:21px; }
.project-control-row input,.project-control-row select { width:100%; min-height:45px; border:1px solid #ced9e7; border-radius:8px; background:white; color:var(--slate); padding:10px 13px; font-size:13px; }
.project-control-row input { padding-left:44px; }
.project-control-row :is(input,select):focus-visible { outline:3px solid var(--blue-light); outline-offset:1px; }
.project-result-bar { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:20px; }
.project-result-bar p { margin:0; color:var(--slate-muted); font-size:12px; }
.project-result-bar>span { font-size:10px; font-weight:800; color:var(--blue-light); letter-spacing:.1em; }
.project-results-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:21px; }
.project-result-card { border:1px solid var(--gray-line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-card); display:flex; flex-direction:column; background:white; }
.project-result-visual { background:linear-gradient(135deg,#0d448c,#9abce5); height:178px; color:white; display:grid; place-items:center; position:relative; overflow:hidden; }
.project-result-visual::after { content:''; position:absolute; width:250px; height:250px; border-radius:50%; border:1px solid rgba(255,255,255,.2); top:-130px; right:-80px; }
.project-result-visual .project-image-icon { font-size:40px; color:white; display:grid; place-items:center; width:77px; height:77px; background:rgba(255,255,255,.13); border-radius:50%; }
.project-image-placeholder { position:absolute; bottom:13px; left:16px; font-size:10px; font-weight:700; color:#edf4ff; }
.project-card-sample { position:absolute; left:15px; top:15px; background:rgba(7,38,79,.78); color:white; border-radius:4px; padding:6px 9px; font-size:9px; font-weight:800; }
.project-result-body { padding:22px; display:flex; flex-direction:column; flex:1; }
.project-result-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
.project-status-tag { border-radius:6px; background:#f1f4f8; color:#536173; padding:6px 8px; font-size:10px; font-weight:700; }
.project-result-body h3 { font-size:17px; line-height:1.4; margin:16px 0 8px; }
.project-result-body p { color:var(--slate-muted); font-size:12px; line-height:1.75; }
.project-finances { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px 0; border-top:1px solid var(--gray-line); border-bottom:1px solid var(--gray-line); }
.project-finances div { display:flex; flex-direction:column; gap:5px; min-width:0; }
.project-finances span { font-size:10px; color:var(--slate-muted); }
.project-finances strong { font-size:11px; color:var(--slate); overflow-wrap:anywhere; }
.project-result-body .progress-heading { margin:18px 0 9px; }
.project-result-body .btn { align-self:stretch; margin-top:20px; }
.project-result-body .project-bottom { margin-top:auto; }
.project-empty { padding:65px 18px; text-align:center; border-radius:15px; background:#f6f9fd; }
.project-empty h3 { margin-bottom:9px; }
.project-empty p { font-size:13px; color:var(--slate-muted); }
.project-empty[hidden] { display:none; }
.project-disclaimer { font-size:11px; line-height:1.8; text-align:center; max-width:890px; color:var(--slate-muted); margin:26px auto 0; }
.project-dialog { width:min(790px,calc(100% - 30px)); max-height:min(92vh,900px); padding:0; overflow:auto; border:0; border-radius:17px; box-shadow:0 25px 90px rgba(0,0,0,.25); }
.project-dialog::backdrop { background:rgba(6,21,50,.72); }
.project-dialog-head { padding:25px 28px 18px; display:flex; justify-content:space-between; gap:15px; align-items:flex-start; border-bottom:1px solid var(--gray-line); }
.project-dialog-head h2 { margin:8px 0 0; font-size:26px; }
.project-dialog-close { border:0; background:#edf3fb; color:var(--blue-primary); width:39px; height:39px; border-radius:50%; font-size:27px; line-height:1; display:grid; place-items:center; }
.project-dialog-content { padding:25px 28px 30px; }
#project-dialog-content { padding:25px 28px 30px; }
.project-dialog-visual { min-height:175px; border-radius:12px; background:linear-gradient(115deg,#0d448c,#6b9fdc); color:white; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; margin-bottom:20px; }
.project-dialog-visual strong { font-size:26px; }
.project-dialog-visual small { font-size:12px; }
.project-dialog-description { font-size:13px; color:var(--slate-muted); }
.project-dialog-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:23px 0; }
.project-dialog-grid>div { background:#f5f8fc; border-radius:9px; padding:15px; display:grid; gap:7px; }
.project-dialog-grid span { color:var(--slate-muted); font-size:11px; }
.project-dialog-grid strong { color:var(--blue-primary); font-size:14px; }
.project-dialog h3 { font-size:17px; margin:24px 0 12px; }
.project-dialog .progress-track { margin:11px 0; }
.project-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.project-gallery>div { background:#edf4ff; color:var(--blue-primary); border:1px dashed #aac4e7; border-radius:9px; padding:25px 10px; min-height:95px; display:grid; place-items:center; text-align:center; font-size:11px; }
.project-updates { margin:0; padding-left:20px; }
.project-updates li { padding:8px 0; font-size:12px; color:var(--slate-muted); }
.project-dialog .btn { margin-top:23px; }
@media(max-width:900px) { .project-results-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) {
 .project-page-hero { padding:65px 0; }
 .project-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 0; }
 .project-summary-grid article:nth-child(2) { border-right:0; }
 .project-results-grid { grid-template-columns:1fr; }
 .project-control-row { grid-template-columns:1fr; }
 .project-filters { padding:15px; }
 .project-tab { padding:10px 13px; }
 .project-dialog-grid { grid-template-columns:1fr; }
 .project-dialog-head,#project-dialog-content { padding:20px; }
}

/* Phase 2: About Us page, following shared blue/red design tokens. */
.about-hero { position:relative; padding:82px 0; background:linear-gradient(110deg,var(--blue-deep),var(--blue-primary) 72%,#1a54ad); color:var(--white); overflow:hidden; }
.about-hero:after { content:''; position:absolute; right:-170px; top:-320px; border:1px solid rgba(255,255,255,.12); width:610px; height:610px; border-radius:50%; }
.about-hero-inner { position:relative; display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:35px; z-index:1; }
.about-crumb { display:flex; align-items:center; gap:12px; font-size:12px; color:#d2e2fa; margin-bottom:35px; }
.about-crumb a:hover { text-decoration:underline; }
.about-hero h1 { margin:18px 0; font-size:clamp(2.7rem,5.2vw,5rem); line-height:1.17; letter-spacing:-.055em; }
.about-hero h1 span { color:#afd0ff; }
.about-hero p { font-size:15px; color:#d9e7fe; max-width:610px; }
.about-hero-mark { justify-self:center; width:min(310px,100%); aspect-ratio:1; border-radius:50%; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); display:grid; place-items:center; }
.about-hero-mark img { width:78%; height:78%; object-fit:contain; }
.about-blue { color:var(--blue-light); }
.about-two-col { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:85px; }
.about-two-col h2,.about-aims-cols h2 { margin:17px 0 22px; }
.about-lead { font-size:15px; font-weight:550; color:#344458; }
.about-muted { font-size:13px; color:var(--slate-muted); }
.about-history { background:#f7faff; border:1px solid var(--gray-line); border-radius:18px; padding:32px; }
.about-history h3 { font-size:18px; margin-bottom:25px; }
.about-timeline { list-style:none; padding:0; margin:0; }
.about-timeline li { display:flex; position:relative; gap:20px; padding-bottom:30px; }
.about-timeline li:last-child { padding-bottom:0; }
.about-timeline li:not(:last-child):before { content:''; position:absolute; left:7px; top:16px; height:calc(100% - 16px); border-left:2px solid #cbdcf2; }
.about-timeline-dot { position:relative; flex:0 0 16px; height:16px; margin-top:2px; background:var(--blue-primary); border-radius:50%; box-shadow:0 0 0 4px #e2edff; z-index:1; }
.about-timeline small { display:block; color:var(--blue-light); font-size:11px; text-transform:uppercase; letter-spacing:.09em; font-weight:800; }
.about-timeline h4 { font-family:var(--heading-font); font-size:15px; margin:6px 0; }
.about-timeline p { font-size:12px; color:var(--slate-muted); margin:0; }
.about-placeholder .about-timeline-dot { background:#a5b9d0; }
.about-who { background:#f4f8fd; padding:90px 0; }
.about-who-grid { display:grid; grid-template-columns:1fr 1fr; gap:75px; align-items:center; }
.about-photo { height:425px; border-radius:18px; overflow:hidden; box-shadow:0 15px 40px rgba(8,44,104,.11); }
.about-photo img { width:100%; height:100%; object-fit:cover; }
.about-who-copy h2 { margin:18px 0; }
.about-who-copy>p { color:var(--slate-muted); font-size:13px; }
.about-check-line { display:flex; gap:12px; align-items:flex-start; margin-top:22px; }
.about-check-line>span { flex:0 0 28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--blue-pale); color:var(--blue-primary); font-weight:800; }
.about-check-line>div { display:grid; gap:6px; }
.about-check-line strong { font-size:13px; }
.about-check-line small { font-size:11px; color:var(--slate-muted); }
.about-center-head { max-width:760px; text-align:center; margin:0 auto 38px; }
.about-center-head h2 { margin:17px 0 12px; }
.about-center-head p { font-size:13px; color:var(--slate-muted); }
.about-vision-cards { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.about-vision-card { padding:39px; min-height:305px; border:1px solid var(--gray-line); background:#f4f8ff; border-radius:18px; }
.about-icon { display:grid; place-items:center; width:49px; height:49px; border-radius:12px; background:var(--blue-pale); color:var(--blue-primary); font-size:27px; margin-bottom:22px; }
.about-vision-card h3 { font-size:22px; margin:12px 0 12px; }
.about-vision-card p { color:var(--slate-muted); font-size:13px; }
.about-vision-blue { color:var(--white); background:var(--blue-primary); border-color:var(--blue-primary); }
.about-vision-blue .about-icon { color:white; background:rgba(255,255,255,.12); }
.about-vision-blue p { color:#d1e1fb; }
.about-values,.about-aims { background:#f6f8fc; }
.about-value-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.about-value { min-height:275px; padding:30px; display:flex; flex-direction:column; }
.about-value h3 { margin:0 0 10px; font-size:20px; }
.about-value p { color:var(--slate-muted); font-size:12px; }
.about-value .card-index { margin-top:auto; }
.about-pillar-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.about-pillar-card { display:flex; gap:15px; align-items:flex-start; border:1px solid var(--gray-line); padding:24px; border-radius:13px; }
.about-pillar-card .about-icon { width:44px; height:44px; flex:0 0 44px; margin:0; font-size:22px; }
.about-pillar-card>div:nth-child(2) { flex:1; }
.about-pillar-card h3 { font-size:15px; margin:0 0 7px; }
.about-pillar-card p { color:var(--slate-muted); font-size:11px; line-height:1.8; margin:0; }
.about-pillar-num { color:#91a6bf; font-size:10px; font-weight:800; }
.about-aims-cols { display:grid; grid-template-columns:.8fr 1.2fr; gap:75px; }
.about-aims-cols>div p { font-size:13px; color:var(--slate-muted); }
.about-aims-list { margin:0; padding:0; list-style:none; border-top:1px solid #dbe3ee; }
.about-aims-list li { display:flex; gap:23px; padding:16px 0; border-bottom:1px solid #dbe3ee; align-items:flex-start; }
.about-aims-list span { font-family:var(--heading-font); font-size:12px; color:var(--blue-light); font-weight:800; }
.about-aims-list p { margin:0; color:#354458; font-size:13px; }
.about-orgchart { display:flex; flex-direction:column; align-items:center; margin:0 auto 70px; max-width:540px; }
.about-org-node { width:min(100%,460px); display:flex; gap:22px; align-items:center; border-radius:12px; background:#f2f7ff; border:1px solid #cbdaf0; padding:18px 25px; }
.about-org-node.top { background:var(--blue-primary); border-color:var(--blue-primary); color:white; }
.about-org-node>span { font-size:20px; font-weight:800; color:var(--blue-light); }
.about-org-node.top>span { color:#b5d1ff; }
.about-org-node h3 { font-size:16px; margin:0 0 4px; }
.about-org-node p { margin:0; color:var(--slate-muted); font-size:11px; }
.about-org-node.top p { color:#d1dff5; }
.about-org-link { height:25px; width:2px; background:#a2bfdf; }
.about-leadership-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:25px; }
.about-leadership-heading h3 { font-size:24px; margin:10px 0 0; }
.about-leadership-heading p { color:var(--slate-muted); font-size:12px; max-width:300px; }
.about-leadership-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.about-leader { border:1px solid var(--gray-line); border-radius:14px; overflow:hidden; }
.about-leader-placeholder { height:210px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; background:linear-gradient(140deg,#dbe8f9,#f4f8fd); color:var(--blue-primary); }
.about-leader-placeholder span { font-size:10px; letter-spacing:.14em; font-weight:800; }
.about-leader-placeholder strong { font-size:13px; }
.about-leader-info { padding:18px; }
.about-leader-info h4 { margin:0 0 6px; font-size:14px; }
.about-leader-info p { color:var(--slate-muted); margin:0; font-size:11px; }
.about-actions { display:flex; flex-wrap:wrap; gap:12px; }
@media(max-width:900px) {
  .about-two-col,.about-who-grid { gap:35px; }
  .about-photo { height:355px; }
  .about-value { padding:22px; }
  .about-pillar-card { padding:17px; }
}
@media(max-width:700px) {
  .about-hero { padding:65px 0; }
  .about-hero-inner,.about-two-col,.about-who-grid,.about-vision-cards,.about-aims-cols { grid-template-columns:1fr; }
  .about-hero-mark { width:170px; }
  .about-hero-inner { gap:20px; }
  .about-who { padding:65px 0; }
  .about-photo { height:290px; }
  .about-value-grid,.about-pillar-grid,.about-leadership-grid { grid-template-columns:1fr; }
  .about-value { min-height:215px; }
  .about-vision-card { min-height:260px; padding:27px; }
  .about-leadership-heading { flex-direction:column; align-items:flex-start; }
  .about-history { padding:25px; }
  .about-actions { flex-direction:column; align-items:stretch; }
  .about-actions .btn { width:100%; }
}

/* WordPress: screen-reader text (used by the Projects filter). */
.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;}

/* WordPress additions (theme only — source design untouched above). */
.ddu-access-wall-note{font-size:11px;}
.wp-caption{max-width:100%;}