/*
=================================================================
Pham Foundation Shared Stylesheet
Theme C: Modern Academic
-----------------------------------------------------------------
Editing guide:
1. Change colors, fonts, radius, and shadows in :root variables first.
2. Reuse existing component classes before adding page-specific rules.
3. Avoid inline style attributes in HTML; page-specific exceptions are
   captured below as u-style utility classes so they remain editable here.
4. English/Vietnamese companion pages are controlled with body.lang-en
   and body.lang-vi plus language utility classes.
=================================================================
*/



    :root {
      --navy: #0f2a44;
      --navy-2: #163a5c;
      --blue: #1f4e79;
      --gold: #c59b3b;
      --gold-soft: #ead7a3;
      --cream: #f8f6f0;
      --paper: #fffdf8;
      --light: #ffffff;
      --ink: #1f2933;
      --muted: #5c6670;
      --soft-muted: #8fa2b6;
      --line: #e4dfd3;
      --green: #2f6f5e;
      --shadow: 0 10px 28px rgba(15,42,68,0.055);
      --shadow-strong: 0 18px 48px rgba(15,42,68,0.13);
      --radius: 12px;
      --font-serif: Georgia, 'Times New Roman', serif;
      --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; width: 100%; overflow-x: hidden; }
    body {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
      font-family: var(--font-sans);
      color: var(--ink);
      background:
        radial-gradient(circle at top left, rgba(197,155,59,0.08), transparent 26%),
        var(--cream);
      line-height: 1.68;
      -webkit-text-size-adjust: 100%;
    }

    h1, h2, h3, h4 {
      font-family: var(--font-serif);
      color: var(--navy);
      line-height: 1.18;
      overflow-wrap: break-word;
    }

    p, li, td, th {
      overflow-wrap: break-word;
    }

    a {
      color: var(--blue);
      text-decoration: none;
      transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    }
    a:hover { color: var(--gold); text-decoration: underline; }

    img, video, iframe {
      max-width: 100%;
      height: auto;
    }

    .topbar {
      background: rgba(15, 42, 68, 0.97);
      color: var(--light);
      padding: 18px 6%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      z-index: 100;
      border-bottom: 3px solid var(--gold);
      backdrop-filter: blur(10px);
    }

    .brand {
      font-family: var(--font-serif);
      font-size: 1.35rem;
      font-weight: bold;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--light);
      text-decoration: none;
      white-space: nowrap;
    }
    .brand:hover { color: var(--gold); text-decoration: none; }

    nav {
      display: flex;
      align-items: center;
      gap: 0;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    nav a {
      color: var(--light);
      margin-left: 22px;
      font-size: 0.94rem;
      font-weight: 600;
      text-decoration: none;
    }
    nav a:hover, nav a.active { color: var(--gold); text-decoration: none; }

    main { width: 100%; max-width: 100%; }

    section {
      width: 100%;
      max-width: 100%;
      padding: 72px 6%;
    }

    .container,
    .hero-inner,
    .page-nav-inner,
    .phil-inner {
      width: 100%;
      max-width: 1120px;
      margin-left: auto;
      margin-right: auto;
    }

    .hero {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 18% 18%, rgba(197,155,59,0.18), transparent 32%),
        radial-gradient(circle at 86% 28%, rgba(31,78,121,0.38), transparent 35%),
        linear-gradient(135deg, rgba(15,42,68,0.97), rgba(22,58,92,0.94));
      color: var(--light);
      padding: 82px 6% 70px;
      border-bottom: 4px solid var(--gold);
      text-align: left;
    }

    body.home-page .hero {
      background:
        radial-gradient(circle at 18% 18%, rgba(197,155,59,0.20), transparent 32%),
        radial-gradient(circle at 86% 28%, rgba(31,78,121,0.40), transparent 35%),
        linear-gradient(135deg, rgba(15,42,68,0.96), rgba(15,42,68,0.88));
      padding: 112px 6% 86px;
    }

    .hero-inner {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.75fr);
      gap: 48px;
      align-items: center;
      position: relative;
      z-index: 1;
    }

    .hero h1 {
      color: var(--light);
      font-size: clamp(2.1rem, 5vw, 4.7rem);
      line-height: 1.06;
      margin-bottom: 20px;
      letter-spacing: -0.02em;
    }

    .hero p,
    .hero .sub,
    .hero .meta,
    .hero .vi-title {
      color: #dbe5ef;
      font-size: 1.04rem;
      line-height: 1.72;
      max-width: 780px;
      margin-bottom: 12px;
    }

    .eyebrow,
    .hero .eyebrow,
    .section-kicker,
    .section-label {
      color: var(--gold);
      text-transform: uppercase;
      letter-spacing: 0.14em;
      font-size: 0.74rem;
      font-weight: 800;
      margin-bottom: 10px;
      font-family: var(--font-sans);
    }

    .status-pill,
    .status-sched {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(197,155,59,0.15);
      border: 1px solid rgba(197,155,59,0.35);
      color: var(--gold);
      font-size: 0.72rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      padding: 5px 12px;
      border-radius: 999px;
      margin-bottom: 16px;
    }

    .section-title {
      font-size: clamp(1.65rem, 3.8vw, 2.65rem);
      margin-bottom: 18px;
      padding-bottom: 13px;
      position: relative;
    }
    .section-title::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 58px;
      height: 3px;
      background: var(--gold);
    }
    .text-center { text-align: center; }
    .text-center .section-title::after {
      left: 50%;
      transform: translateX(-50%);
    }

    .lead {
      font-size: 1.08rem;
      color: #314155;
      line-height: 1.74;
      margin-bottom: 24px;
      max-width: 850px;
      margin-left: auto;
      margin-right: auto;
    }
    .lead.light { color: #e2e8f0; }

    .split,
    .two-col {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.85fr);
      gap: 34px;
      align-items: start;
    }

    .three-col {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 22px;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 22px;
      margin-top: 32px;
    }

    .program-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px;
      margin-top: 32px;
    }

    .partner-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 22px;
      margin-top: 34px;
    }

    .arc-grid,
    .status-card,
    .metric-grid,
    .value-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 16px;
      margin-top: 22px;
    }

    /* Arc card redesign — three-year journey */
    .arc-card {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .arc-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-strong);
    }
    .arc-year {
      background: linear-gradient(135deg, var(--navy), var(--navy-2));
      color: var(--light);
      font-family: var(--font-serif);
      font-size: 1.35rem;
      font-weight: bold;
      letter-spacing: 0.04em;
      padding: 22px 24px 8px;
      border-bottom: 3px solid var(--gold);
    }
    .arc-year-vi {
      display: none;
    }
    .arc-award {
      background: linear-gradient(135deg, var(--navy), var(--navy-2));
      color: var(--gold-soft);
      font-size: 0.82rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      padding: 8px 24px 20px;
    }
    .arc-msg {
      flex: 1;
      padding: 22px 24px;
      font-family: var(--font-serif);
      font-style: italic;
      font-size: 1.02rem;
      color: var(--ink);
      line-height: 1.72;
      border-top: none;
    }

    /* Grade 12 arc card — culmination treatment */
    .arc-card.u-style-061 {
      border: 2px solid var(--gold);
      box-shadow: 0 0 0 1px rgba(197,155,59,0.18), var(--shadow-strong);
      background: #fffbf0;
    }
    .arc-card.u-style-061 .arc-year {
      background: linear-gradient(135deg, #1a3a58, var(--gold));
      color: var(--light);
      font-size: 1.48rem;
    }
    .arc-card.u-style-061 .arc-award {
      background: linear-gradient(135deg, #1a3a58, var(--gold));
      color: var(--light);
      font-weight: 800;
    }
    .arc-card.u-style-061 .arc-msg {
      color: var(--navy);
      font-size: 1.06rem;
    }

    .card,
    .panel,
    .policy-section,
    .statement-section,
    .decision-card,
    .award-card,
    .doc-card,
    .report-card,
    .metric-card,
    .letter-block,
    .intro-box,
    .toc,
    .donor-wall,
    .donor-list,
    .goal-block,
    .program-card,
    .partner-card,
    .arc-card,
    .status-item {
      background: rgba(255,255,255,0.97);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .card,
    .panel,
    .policy-section,
    .statement-section,
    .report-card,
    .metric-card,
    .letter-block,
    .intro-box,
    .toc,
    .donor-wall,
    .donor-list,
    .program-card,
    .status-item {
      padding: 28px;
    }

    .card:hover,
    .program-card:hover,
    .partner-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-strong);
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .card h3,
    .program-card h3,
    .partner-card h3,
    .report-card h3 {
      font-size: 1.28rem;
      margin-bottom: 12px;
    }

    .highlight,
    .dark-panel,
    .card-navy,
    .navy-card,
    .snapshot,
    .hero-card,
    .hero-badge {
      background: linear-gradient(145deg, var(--navy), var(--blue));
      color: var(--light);
      border: 1px solid rgba(197,155,59,0.28);
      border-top: 4px solid var(--gold);
      border-radius: var(--radius);
      padding: 30px;
      box-shadow: var(--shadow-strong);
    }

    .snapshot,
    .hero-card,
    .hero-badge {
      background: rgba(255,255,255,0.08);
      backdrop-filter: blur(8px);
    }

    .highlight h1, .highlight h2, .highlight h3, .highlight h4,
    .dark-panel h1, .dark-panel h2, .dark-panel h3, .dark-panel h4,
    .card-navy h1, .card-navy h2, .card-navy h3, .card-navy h4,
    .navy-card h1, .navy-card h2, .navy-card h3, .navy-card h4,
    .snapshot h1, .snapshot h2, .snapshot h3, .snapshot h4,
    .hero-card h1, .hero-card h2, .hero-card h3, .hero-card h4,
    .hero-badge h1, .hero-badge h2, .hero-badge h3, .hero-badge h4 {
      color: var(--gold);
    }

    .highlight p, .highlight li, .highlight span, .highlight strong,
    .dark-panel p, .dark-panel li, .dark-panel span, .dark-panel strong,
    .card-navy p, .card-navy li, .card-navy span, .card-navy strong,
    .navy-card p, .navy-card li, .navy-card span, .navy-card strong,
    .snapshot p, .snapshot li, .snapshot span, .snapshot strong,
    .hero-card p, .hero-card li, .hero-card span, .hero-card strong,
    .hero-badge p, .hero-badge li, .hero-badge span, .hero-badge strong {
      color: #e2e8f0;
    }

    .hero-card h3 {
      padding-bottom: 12px;
      margin-bottom: 12px;
      border-bottom: 1px solid rgba(197,155,59,0.4);
    }
    .hero-card-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
      padding: 6px 0;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      font-size: 0.88rem;
    }
    .hero-card-row:last-child { border-bottom: none; }
    .hero-card-row .k {
      color: var(--soft-muted);
      font-weight: 600;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .hero-card-row .v {
      color: #e2e8f0;
      text-align: right;
    }

    .highlight a, .dark-panel a, .card-navy a, .navy-card a, .snapshot a {
      color: var(--gold);
    }

    .highlight hr, .dark-panel hr, .card-navy hr, .navy-card hr, .snapshot hr {
      border: none;
      border-top: 1px solid rgba(255,255,255,0.16);
      margin: 18px 0;
    }

    .button {
      display: inline-block;
      padding: 9px 20px;
      border-radius: 4px;
      font-weight: 700;
      font-size: 0.86rem;
      letter-spacing: 0.04em;
      background: transparent;
      color: var(--navy);
      border: 1.5px solid var(--gold);
      text-decoration: none;
      transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
    }
    .button:hover {
      background: var(--gold);
      color: var(--navy);
      border-color: var(--gold);
      text-decoration: none;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(197,155,59,0.25);
    }
    /* Light button — for use on dark/navy backgrounds */
    .button.light {
      color: var(--light);
      border-color: rgba(255,255,255,0.55);
    }
    .button.light:hover {
      background: rgba(255,255,255,0.15);
      color: var(--light);
      border-color: rgba(255,255,255,0.9);
      box-shadow: none;
    }
    .button.secondary {
      background: transparent;
      color: rgba(255,255,255,0.85);
      border-color: rgba(255,255,255,0.45);
    }
    .button.secondary:hover {
      background: rgba(255,255,255,0.12);
      color: var(--light);
      border-color: rgba(255,255,255,0.8);
      box-shadow: none;
    }
    /* Auto-apply light text to buttons inside dark sections */
    .hero .button:not(.secondary),
    .dark-panel .button,
    .navy-band .button,
    .card-navy .button,
    .science-band .button,
    .highlight .button {
      color: var(--light);
      border-color: rgba(255,255,255,0.55);
    }
    .hero .button:not(.secondary):hover,
    .dark-panel .button:hover,
    .navy-band .button:hover,
    .card-navy .button:hover,
    .science-band .button:hover,
    .highlight .button:hover {
      background: rgba(255,255,255,0.15);
      color: var(--light);
      border-color: rgba(255,255,255,0.9);
      box-shadow: none;
    }

    .button-row {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      align-items: center;
    }

    .facts,
    .footer-cta {
      background: var(--paper);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .navy-band,
    .science-band {
      background: linear-gradient(135deg, rgba(15,42,68,0.98), rgba(22,58,92,0.96));
      color: var(--light);
      border-top: 4px solid var(--gold);
      border-bottom: 4px solid var(--gold);
      padding: 70px 6%;
    }

    .navy-band .section-title,
    .science-band .section-title,
    .section-title.light {
      color: var(--light);
    }

    .navy-band p,
    .science-band p,
    .navy-band .en {
      color: #e2e8f0;
    }

    /* ── Transparency cards ───────────────────────── */
    .transparency-grid {
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
    .transparency-card {
      display: flex;
      flex-direction: column;
      padding: 0;
      overflow: hidden;
    }
    .transparency-card-top {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 18px 22px;
      border-bottom: 1px solid rgba(255,255,255,0.12);
    }
    .tc-gold  { background: linear-gradient(135deg, var(--navy), #2a5080); border-top: 4px solid var(--gold); }
    .tc-navy  { background: linear-gradient(135deg, var(--navy), #1a4060); border-top: 4px solid #4a90c4; }
    .tc-green { background: linear-gradient(135deg, #1e4d3e, var(--green)); border-top: 4px solid #4caf88; }
    .tc-blue  { background: linear-gradient(135deg, #1a3a6a, #2060a0); border-top: 4px solid #7ab0e0; }
    .transparency-card-icon {
      font-size: 1.4rem;
      font-family: var(--font-serif);
      font-weight: bold;
      color: rgba(255,255,255,0.9);
      width: 38px;
      text-align: center;
      flex-shrink: 0;
    }
    .transparency-card-kicker {
      font-size: 0.72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: rgba(255,255,255,0.72);
    }
    .transparency-card-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 22px;
    }
    .transparency-card-body h3 {
      font-size: 1.08rem;
      margin-bottom: 10px;
      color: var(--navy);
    }
    .transparency-card-body p {
      font-size: 0.94rem;
      color: var(--muted);
      line-height: 1.65;
      flex: 1;
      margin-bottom: 18px;
    }
    .transparency-card-links {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: auto;
      padding-top: 14px;
      border-top: 1px solid var(--line);
    }
    .transparency-card-links a:not(.button) {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--blue);
    }
    .transparency-card-links a:not(.button):hover {
      color: var(--gold);
    }

    .bi-title { margin-bottom: 20px; }
    .bi-title .vi,
    .vi,
    .vi-title,
    .vi-cell,
    .navy-band .vi {
      color: var(--soft-muted);
      font-style: italic;
      font-family: var(--font-serif);
    }

    .bi-para { margin-bottom: 20px; }
    .bi-para .en { color: #374151; margin-bottom: 6px; }
    .bi-para .vi {
      padding-left: 14px;
      border-left: 2px solid rgba(197,155,59,0.35);
    }

    .phil-inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, 0.85fr);
      gap: 40px;
      align-items: start;
    }

    .quote-pull {
      border-left: 3px solid var(--gold);
      padding-left: 22px;
      max-width: 100%;
    }

    .quote-pull blockquote {
      color: #f0f4f8;
      font-family: var(--font-serif);
      font-style: italic;
      font-size: 1.02rem;
      line-height: 1.76;
      margin-bottom: 14px;
    }

    .quote-pull .vi-quote,
    .quote-pull .attr {
      color: var(--soft-muted);
    }

    .page-nav {
      background: rgba(255,255,255,0.96);
      border-bottom: 1px solid var(--line);
      position: sticky;
      top: 61px;
      z-index: 90;
      backdrop-filter: blur(8px);
    }
    .page-nav-inner {
      display: flex;
      overflow-x: auto;
      scrollbar-width: none;
      padding: 0 6%;
    }
    .page-nav-inner::-webkit-scrollbar { display: none; }
    .page-nav a {
      color: var(--muted);
      font-size: 0.82rem;
      font-weight: 800;
      padding: 13px 14px;
      border-bottom: 3px solid transparent;
      white-space: nowrap;
    }
    .page-nav a:hover {
      color: var(--navy);
      border-bottom-color: var(--gold);
      text-decoration: none;
    }

    .table-wrap {
      width: 100%;
      max-width: 100%;
      margin-top: 22px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.92rem;
    }
    th {
      background: var(--navy);
      color: var(--light);
      padding: 12px 14px;
      font-size: 0.8rem;
      text-align: left;
      vertical-align: top;
    }
    td {
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
      color: #374151;
      vertical-align: top;
    }
    tr:nth-child(even) td { background: #fbf9f4; }
    tr:last-child td { border-bottom: none; }
    .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; color: var(--navy); }
    .totals-row td {
      font-weight: 800;
      background: #eef6f3 !important;
      border-top: 2px solid var(--green);
      color: var(--navy);
    }

    .award-card-header,
    .decision-header {
      background: var(--navy);
      border-bottom: 3px solid var(--gold);
      padding: 16px 20px;
    }
    .award-card-header h4,
    .decision-header .q {
      color: var(--light);
    }
    .award-card-body,
    .decision-body {
      padding: 20px;
    }
    .decision-header {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: baseline;
    }
    .decision-header .date {
      color: var(--soft-muted);
      font-size: 0.76rem;
      white-space: nowrap;
    }
    .decision-body .rationale {
      color: var(--muted);
      border-left: 3px solid rgba(197,155,59,0.35);
      padding-left: 12px;
      font-style: italic;
      margin-top: 10px;
    }

    .timeline {
      margin-top: 24px;
      border-left: 3px solid var(--gold);
      padding-left: 22px;
      max-width: 100%;
    }
    .timeline-item {
      margin-bottom: 28px;
      position: relative;
      max-width: 100%;
    }
    .timeline-item h3,
    .timeline-item h4 {
      font-size: 1.16rem;
      margin-bottom: 6px;
    }
    .t-label {
      color: var(--gold);
      font-size: 0.76rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 800;
      margin-bottom: 6px;
    }

    .doc-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 18px;
      margin-top: 24px;
    }
    .doc-card {
      padding: 20px;
      display: flex;
      gap: 14px;
      align-items: flex-start;
    }
    .doc-number {
      background: var(--navy);
      color: var(--gold);
      border-radius: 6px;
      padding: 8px 10px;
      min-width: 58px;
      text-align: center;
      font-weight: 800;
    }

    .notice,
    .notice-gold,
    .contact-box {
      border-radius: 8px;
      padding: 20px 22px;
      margin-top: 24px;
    }
    .notice, .contact-box {
      background: #eef6f3;
      border-left: 4px solid var(--green);
    }
    .notice-gold {
      background: #fffbeb;
      border-left: 4px solid var(--gold);
    }

    .toc ul {
      columns: 2;
      column-gap: 34px;
      padding-left: 20px;
      margin-top: 10px;
    }
    .toc li {
      margin-bottom: 8px;
      break-inside: avoid;
      color: var(--muted);
      font-size: 0.92rem;
    }

    .metric-card .label,
    .status-item .label,
    .hero-stat .lbl {
      color: var(--muted);
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      font-weight: 800;
      margin-bottom: 6px;
    }
    .metric-card .value,
    .status-item .value,
    .hero-stat .val,
    .hero-badge .badge-amount {
      font-family: var(--font-serif);
      color: var(--navy);
      font-size: 1.65rem;
      font-weight: 800;
    }
    .hero-stat .val,
    .hero-badge .badge-amount {
      color: var(--gold);
    }

    .goal-block {
      max-width: 620px;
      margin: 34px auto 0;
    }
    .progress-track {
      background: rgba(255,255,255,0.13);
      border-radius: 4px;
      height: 10px;
      overflow: hidden;
      margin-bottom: 10px;
    }
    .progress-fill {
      background: linear-gradient(90deg, var(--gold), var(--gold-soft));
      height: 100%;
    }

    .partner-image {
      width: 100%;
      aspect-ratio: 600/340;
      object-fit: cover;
      display: block;
    }
    .partner-card .body { padding: 22px; }

    .founder-block {
      display: grid;
      grid-template-columns: 170px minmax(0, 1fr);
      gap: 26px;
      align-items: start;
      background: rgba(255,255,255,0.97);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 26px;
      margin-top: 28px;
      box-shadow: var(--shadow);
    }
    .founder-img {
      width: 150px !important;
      height: 200px !important;
      max-width: 150px !important;
      max-height: 200px !important;
      object-fit: cover;
      border-radius: 8px;
      border: 1px solid var(--line);
      box-shadow: 0 8px 22px rgba(15,42,68,0.10);
      display: block;
    }
    .founder-text { min-width: 0; }
    .founder-text h3 { font-size: 1.35rem; margin-bottom: 8px; }

    .mini-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      max-width: 1120px;
      margin: -38px auto 0;
      padding: 0 6%;
      position: relative;
      z-index: 2;
    }
    .mini-stat {
      background: var(--light);
      border: 1px solid var(--line);
      padding: 24px 22px;
      text-align: center;
      box-shadow: var(--shadow);
    }
    .mini-stat .value {
      display: block;
      font-family: var(--font-serif);
      font-size: 1.7rem;
      color: var(--navy);
      font-weight: 800;
    }
    .mini-stat .label {
      display: block;
      color: var(--muted);
      font-size: 0.76rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-top: 6px;
      font-weight: 800;
    }

    footer {
      background: var(--navy);
      color: var(--light);
      padding: 44px 6%;
      text-align: center;
      border-top: 4px solid var(--gold);
    }
    footer p {
      margin-bottom: 8px;
      color: #cbd5e0;
      font-size: 0.95rem;
    }
    footer a { color: #cbd5e0; }
    footer a:hover { color: var(--gold); }

    @media (max-width: 980px) {
      .hero-inner,
      .split,
      .two-col,
      .three-col,
      .phil-inner,
      .program-grid {
        grid-template-columns: 1fr;
      }
      .hero-card, .hero-badge, .snapshot {
        max-width: 560px;
      }
    }

    @media (max-width: 780px) {
      body { font-size: 16px; }
      .topbar {
        position: static;
        padding: 14px 5%;
        flex-direction: column;
        gap: 10px;
        text-align: center;
      }
      .brand { font-size: 1.18rem; }
      nav {
        width: 100%;
        justify-content: center;
        gap: 8px 14px;
      }
      nav a {
        margin-left: 0;
        font-size: 0.82rem;
        line-height: 1.35;
      }
      section,
      .hero,
      .navy-band,
      .science-band {
        padding-left: 5%;
        padding-right: 5%;
      }
      section { padding-top: 48px; padding-bottom: 48px; }
      .hero {
        padding-top: 56px;
        padding-bottom: 46px;
      }
      body.home-page .hero {
        padding-top: 72px;
        padding-bottom: 64px;
      }
      .hero h1 {
        font-size: clamp(2rem, 10vw, 2.9rem);
      }
      .hero p { font-size: 0.98rem; max-width: 100%; }
      .page-nav { position: static; }
      .page-nav-inner { padding: 0 5%; }
      .grid,
      .arc-grid,
      .status-card,
      .metric-grid,
      .value-list,
      .partner-grid,
      .doc-grid,
      .mini-stats {
        grid-template-columns: 1fr;
      }
      .mini-stats {
        margin-top: 0;
        padding-top: 20px;
      }
      .card,
      .panel,
      .policy-section,
      .statement-section,
      .report-card,
      .metric-card,
      .letter-block,
      .intro-box,
      .toc,
      .donor-wall,
      .donor-list,
      .program-card,
      .arc-card,
      .status-item,
      .highlight,
      .dark-panel,
      .card-navy,
      .navy-card,
      .snapshot,
      .hero-card,
      .hero-badge {
        padding: 22px;
        border-radius: 10px;
      }
      .doc-card {
        flex-direction: column;
        padding: 20px;
      }
      .decision-header {
        display: block;
      }
      .decision-header .date {
        display: block;
        margin-top: 6px;
      }
      .toc ul { columns: 1; }
      .table-wrap {
        overflow-x: auto;
        max-width: 100%;
      }
      table {
        width: max-content;
        min-width: 560px;
        max-width: none;
      }
      .founder-block {
        grid-template-columns: 1fr !important;
        text-align: left;
        padding: 22px;
      }
      .founder-img {
        width: 128px !important;
        height: 170px !important;
        max-width: 128px !important;
        max-height: 170px !important;
        margin: 0 auto 8px;
      }
      .button-row { gap: 10px; }
      .button { width: auto; }
    }

  

/* ===============================
   Shared site polish added during theme refactor
   =============================== */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

body {
  text-rendering: optimizeLegibility;
}

.topbar {
  box-shadow: 0 8px 28px rgba(15,42,68,0.13);
}

.brand {
  letter-spacing: 0.055em;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 6% 0 auto;
  width: 220px;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--gold));
  opacity: .9;
}

.hero h1,
.hero p,
.hero .eyebrow {
  text-wrap: balance;
}

.card,
.panel,
.program-card,
.partner-card,
.report-card,
.policy-section,
.statement-section,
.intro-box,
.letter-block,
.toc,
.highlight,
.snapshot,
.hero-card,
.hero-badge,
.dark-panel,
.navy-card,
.card-navy {
  overflow: hidden;
}

.founder-block {
  grid-template-columns: minmax(128px, 170px) minmax(0, 1fr);
}

.founder-img {
  aspect-ratio: 3 / 4;
  object-position: center top;
}

.partner-card,
.program-card,
.card,
.panel {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.partner-card:hover,
.program-card:hover,
.card:hover,
.panel:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-strong);
}

.button,
.btn,
a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 780px) {
  .hero::after { display: none; }
  .topbar { border-bottom-width: 2px; }
  nav { row-gap: 6px; }
  nav a {
    padding: 5px 7px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
  }
  .hero h1 { letter-spacing: -0.02em; }
  .founder-block { align-items: center; }
  .founder-text h3 { text-align: center; }
}

@media (max-width: 420px) {
  .brand { font-size: 1.02rem; }
  nav a { font-size: 0.76rem; }
  section { padding-top: 42px; padding-bottom: 42px; }
  .card,
  .panel,
  .policy-section,
  .statement-section,
  .report-card,
  .metric-card,
  .letter-block,
  .intro-box,
  .toc,
  .donor-wall,
  .donor-list,
  .program-card,
  .arc-card,
  .status-item,
  .highlight,
  .dark-panel,
  .card-navy,
  .navy-card,
  .snapshot,
  .hero-card,
  .hero-badge { padding: 18px; }
}


/* Theme C: Modern Academic */
:root {
  --navy: #182333;
  --navy-2: #24364c;
  --blue: #315a7d;
  --gold: #9a7b42;
  --gold-soft: #d9c394;
  --cream: #f4f6f8;
  --paper: #ffffff;
  --ink: #202936;
  --muted: #667085;
  --soft-muted: #98a2b3;
  --line: #e5e7eb;
  --green: #3f665f;
  --radius: 16px;
  --shadow: 0 14px 34px rgba(24,35,51,0.07);
  --shadow-strong: 0 20px 54px rgba(24,35,51,0.15);
  --font-serif: Georgia, 'Times New Roman', serif;
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.hero, body.home-page .hero {
  background:
    radial-gradient(circle at 15% 15%, rgba(154,123,66,0.18), transparent 30%),
    radial-gradient(circle at 82% 24%, rgba(49,90,125,0.34), transparent 34%),
    linear-gradient(135deg, #182333, #24364c) !important;
}
.topbar {
  background: rgba(24,35,51,.97);
}
footer { background: #182333; }
.card, .panel, .program-card, .partner-card, .report-card, .policy-section, .statement-section,
.intro-box, .letter-block, .toc, .highlight, .snapshot, .hero-card, .hero-badge {
  border-radius: 16px;
}


/* Language switch and bilingual companion pages */
.lang-switch {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 18px auto 0;
  max-width: 1040px;
}
.lang-switch a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(30, 64, 175, 0.18);
  background: #ffffff;
  color: var(--blue, #1e40af);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 13px;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}
.lang-switch a.active {
  background: var(--navy, #0f172a);
  color: #fff;
  border-color: var(--navy, #0f172a);
}
.lang-switch-note {
  text-align: center;
  color: var(--muted, #64748b);
  font-size: 0.86rem;
  margin-top: 8px;
}
body.vi-page .topbar nav a,
body.vi-page footer,
body.vi-page p,
body.vi-page li,
body.vi-page td,
body.vi-page th {
  line-height: 1.75;
}
.vi-clean-note {
  max-width: 980px;
  margin: 18px auto;
  padding: 14px 18px;
  border-left: 4px solid var(--gold, #c59b3b);
  background: rgba(197,155,59,0.08);
  color: var(--navy, #0f172a);
  border-radius: 10px;
  font-size: 0.94rem;
}
.language-links-inline {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 700px) {
  .lang-switch { margin: 12px 12px 0; }
  .lang-switch a { flex: 1 1 140px; justify-content: center; }
}


/* ===============================
   Language flow controls
   =============================== */
body.lang-en .u-lang-vi,
body.lang-en .letter-vi,
body.lang-en .vi-only { display: none !important; }
body.lang-vi .u-lang-en,
body.lang-vi .letter-en,
body.lang-vi .en-only { display: none !important; }
body.lang-vi .lang-switch-note,
body.lang-en .lang-switch-note { padding-inline: 16px; }

/* ===============================
   Generated utilities from formerly inline styles
   Keep these in CSS so future theme changes stay centralized.
   =============================== */
.u-style-001 {margin-top:18px;}
.u-style-002 {background-color: var(--light);border-top: 1px solid var(--line);}
.u-style-003 {background-color: var(--blue);}
.u-style-004 {margin-top:14px;padding-left: 20px;color: #e2e8f0;}
.u-style-005 {margin-bottom: 8px;}
.u-style-006 {margin-top: 10px;}
.u-style-007 {color:#64748b;}
.u-style-008 {text-transform:uppercase;letter-spacing:0.04em;}
.u-style-009 {width:26.3%;}
.u-style-010 {text-align:center;}
.u-style-011 {margin-bottom: 0;}
.u-style-012 {max-width:640px;}
.u-style-013 {margin-top: 16px;}
.u-style-014 {font-size:0.92rem;color:var(--muted);}
.u-style-015 {color: var(--gold);}
.u-style-016 {font-style: italic;color: #64748b;font-family: var(--font-serif);font-size: 0.85rem;}
.u-style-017 {display:flex;justify-content:center;margin-bottom:16px;}
.u-style-018 {margin-top:24px;}
.u-style-019 {color: var(--muted);font-style: italic;font-family: var(--font-serif);font-size: 0.95rem;}
.u-style-020 {padding-left:20px;}
.u-style-021 {background: rgba(255,255,255,0.07);border: 1px solid rgba(197,155,59,0.28);}
.u-style-022 {margin-bottom: 15px;}
.u-style-023 {margin-top: 8px;}
.u-style-024 {font-size:0.85rem;color:rgba(201,162,74,0.7);}
.u-style-025 {font-size:0.85rem;color:rgba(255,255,255,0.35);font-style:italic;}
.u-style-026 {justify-content:center;}
.u-style-027 {text-align: center;}
.u-style-028 {display: inline-block;}
.u-style-029 {max-width: 760px;margin: 0 auto 36px;}
.u-style-030 {font-size: 0.85rem;color: var(--muted);margin-bottom: 14px;}
.u-style-031 {font-size: 0.88rem;padding: 10px 20px;}
.u-style-032 {font-size: 0.85rem;color: var(--muted);}
.u-style-033 {margin-top: 14px;font-style: normal;font-size: 0.85rem;color: #94a3b8;}
.u-style-034 {max-width: 700px;text-align: center;}
.u-style-035 {margin-bottom: 24px;color: #4b5563;}
.u-style-036 {margin-top: 18px;font-size: 0.9rem;color: var(--muted);}
.u-style-037 {font-weight: 600;color: var(--navy);margin-bottom: 12px;}
.u-style-038 {margin-top: 20px;font-size: 0.9rem;color: var(--muted);}
.u-style-039 {color: #374151;max-width: 820px;}
.u-style-040 {margin-top: 16px;font-size: 0.88rem;color: var(--muted);}
.u-style-041 {margin-top: 8px;font-style: italic;font-size: 0.82rem;}
.u-style-042 {max-width: 860px;}
.u-style-043 {padding: 40px 6%;background: var(--light);border-top: 1px solid var(--line);}
.u-style-044 {display: flex;gap: 16px;flex-wrap: wrap;align-items: center;}
.u-style-045 {font-size: 0.95rem;color: var(--muted);}
.u-style-046 {gap:56px;align-items:start;}
.u-style-047 {font-style:italic;font-family:var(--font-serif);font-size:1.05rem;color:var(--navy);border-left:3px solid var(--gold);padding-left:18px;margin-top:24px;line-height:1.7;}
.u-style-048 {color:#e2e8f0;font-size:0.92rem;margin-bottom:10px;}
.u-style-049 {color:#e2e8f0;font-size:0.92rem;margin-bottom:6px;}
.u-style-050 {color:var(--gold);}
.u-style-051 {color:#64748b;font-size:0.83rem;font-style:italic;margin-bottom:10px;}
.u-style-052 {color:#e2e8f0;font-size:0.92rem;}
.u-style-053 {margin-bottom:14px;}
.u-style-054 {margin-top:16px;font-style:italic;color:#374151;}
.u-style-055 {margin-bottom:12px;}
.u-style-056 {margin-top:16px;font-style:italic;color:#94a3b8;}
.u-style-057 {font-size:1.3rem;margin-top:44px;margin-bottom:6px;}
.u-style-058 {margin-top:16px;}
.u-style-059 {font-style:italic;color:var(--navy);}
.u-style-060 {font-size:0.95rem;color:#94a3b8;}
.u-style-061 {border-top-color:var(--gold);background:#fffbf0;}
.u-style-062 {color:#e2e8f0;}
.u-style-063 {margin-bottom:0;}
.u-style-064 {margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.1);}
.u-style-065 {color:var(--gold);font-size:0.95rem;margin-bottom:10px;}
.u-style-066 {color:#e2e8f0;font-size:0.88rem;line-height:1.75;margin-bottom:8px;}
.u-style-067 {color:#64748b;font-size:0.83rem;font-style:italic;}
.u-style-068 {color:var(--gold);font-family:var(--font-serif);font-size:1rem;font-style:italic;margin-top:10px;}
.u-style-069 {align-items:start;}
.u-style-070 {margin-top:6px;}
.u-style-071 {font-size:0.9rem;}
.u-style-072 {border-top:3px solid var(--gold);margin-bottom:20px;}
.u-style-073 {font-size:0.86rem;}
.u-style-074 {padding:8px 0;border-bottom:1px solid var(--line);color:var(--gold);font-weight:600;width:130px;}
.u-style-075 {padding:8px 0 8px 12px;border-bottom:1px solid var(--line);}
.u-style-076 {color:#94a3b8;font-style:italic;font-size:0.8rem;}
.u-style-077 {padding:8px 0;border-bottom:1px solid var(--line);color:var(--gold);font-weight:600;}
.u-style-078 {border-top:3px solid var(--navy);}
.u-style-079 {margin-bottom:10px;}
.u-style-080 {font-size:0.83rem;color:var(--muted);margin-bottom:12px;}
.u-style-081 {padding-left:18px;font-size:0.9rem;color:#374151;}
.u-style-082 {margin-bottom:8px;}
.u-style-083 {color:#94a3b8;font-size:0.83rem;}
.u-style-084 {padding-left:18px;font-size:0.9rem;color:#374151;margin-top:10px;}
.u-style-085 {border-top:3px solid var(--green);margin-bottom:20px;}
.u-style-086 {margin-top:10px;}
.u-style-087 {margin-top:20px;padding:16px 20px;background:#f8f6f0;border:1px solid var(--line);border-radius:4px;font-size:0.88rem;color:var(--muted);}
.u-style-088 {color:var(--navy);}
.u-style-089 {color:var(--blue);font-weight:600;}
.u-style-090 {text-align:center;max-width:700px;}
.u-style-091 {display:inline-block;}
.u-style-092 {margin-top:16px;font-size:0.88rem;color:var(--muted);}
.u-style-093 {color:var(--blue);font-weight:500;}
.u-style-094 {max-width:800px;margin:0 auto;text-align:center;}
.u-style-095 {margin-top:20px;}
.u-style-096 {color:#e2e8f0;font-size:1rem;line-height:1.85;}
.u-style-097 {margin-top:44px;padding-top:36px;border-top:1px solid rgba(197,155,59,0.25);}
.u-style-098 {font-size:0.72rem;font-weight:bold;text-transform:uppercase;letter-spacing:0.16em;color:var(--gold);margin-bottom:10px;}
.u-style-099 {font-family:var(--font-serif);font-size:1.4rem;color:var(--light);margin-bottom:14px;}
.u-style-100 {color:#cbd5e0;font-size:0.95rem;line-height:1.8;max-width:640px;margin:0 auto 10px;}
.u-style-101 {font-size:0.83rem;color:#64748b;font-style:italic;font-family:var(--font-serif);margin-bottom:24px;}
.u-style-102 {display:inline-block;background:transparent;border:1px solid rgba(197,155,59,0.6);color:var(--gold);font-size:0.85rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;padding:10px 24px;border-radius:3px;text-decoration:none;transition:all 0.2s;}
.u-style-103 {border-top:3px solid var(--gold);}
.u-style-104 {margin-top:14px;font-size:0.87rem;color:var(--muted);}
.u-style-105 {padding-left:18px;font-size:0.9rem;color:#374151;margin-top:12px;}
.u-style-106 {margin-top:32px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
.u-style-107 {font-size:0.95rem;color:var(--muted);}
.u-style-108 {font-size:0.88rem;color:var(--muted);margin-top:-8px;margin-bottom:24px;font-style:italic;}
.u-style-109 {margin-top:14px;display:flex;gap:12px;flex-wrap:wrap;}
.u-style-110 {display:inline-flex;align-items:center;gap:6px;padding:7px 16px;background:var(--navy);color:#fff;border-radius:4px;font-size:0.82rem;font-weight:600;text-decoration:none;}
.u-style-111 {display:inline-flex;align-items:center;gap:6px;padding:7px 16px;background:transparent;color:var(--navy);border:1px solid var(--navy);border-radius:4px;font-size:0.82rem;font-weight:600;text-decoration:none;}
.u-style-112 {margin-top:14px;padding:12px 16px;}
.u-style-113 {color:#64748b;font-size:0.9rem;font-style:italic;}
.u-style-114 {font-size:0.88rem;color:var(--muted);font-style:normal;}
.u-style-115 {font-size:0.9rem;color:var(--muted);font-style:italic;}
.u-style-116 {font-size:0.85rem;color:#64748b;}
.u-style-117 {font-size:0.9rem;margin-top:14px;}
.u-style-118 {font-size:0.85rem;color:#64748b;font-style:italic;}

/* 2026-05-29 CSS-only readability correction for English TQT content.
   Keeps English and Vietnamese scholarship pages mirrored by preventing
   bilingual paragraph English text from being forced dark inside dark bands. */
.hero .bi-para .en,
.navy-band .bi-para .en,
.science-band .bi-para .en,
.hero .bi-title,
.navy-band .bi-title,
.science-band .bi-title,
.hero .bi-para,
.navy-band .bi-para,
.science-band .bi-para {
  color: #e2e8f0;
}

.hero .bi-para .vi,
.navy-band .bi-para .vi,
.science-band .bi-para .vi,
.hero .bi-title .vi,
.navy-band .bi-title .vi,
.science-band .bi-title .vi {
  color: #cbd5e1;
}

/* ------------------------------------------------------------------
   Endowment page system
   Applies to endowment.html and endowment-viet.html.
   These classes were present in the HTML but previously did not have
   dedicated stylesheet rules, causing the Vietnamese page to appear
   partially unformatted in some browsers/deployments.
------------------------------------------------------------------ */
.why-band,
.math-band,
.give-band,
.wall-section,
.vision-band {
  padding: 72px 6%;
}

.why-band,
.give-band,
.vision-band {
  background: var(--paper);
}

.math-band,
.wall-section {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.why-inner,
.math-inner,
.give-inner,
.wall-inner,
.vision-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.why-inner .lead,
.math-inner .lead,
.give-inner .lead,
.vision-inner p {
  max-width: 900px;
}

.math-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
}

.math-cell {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  box-shadow: var(--shadow);
}

.math-cell .val {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3.15rem);
  line-height: 1;
  color: var(--navy);
  margin-bottom: 12px;
}

.math-cell .val span {
  font-size: 0.55em;
  vertical-align: super;
  margin-right: 2px;
  color: var(--gold);
}

.math-cell .lbl {
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 6px;
}

.math-cell .sub {
  color: var(--muted);
  font-size: 0.94rem;
}

.goal-block {
  max-width: 760px;
  margin: 34px auto 0;
  padding: 26px;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(255,255,255,0.56);
  border-radius: var(--radius);
  box-shadow: var(--shadow-strong);
  color: var(--ink);
}

.goal-total {
  text-align: center;
  margin-bottom: 18px;
}

.amount {
  font-family: var(--font-serif);
  font-size: clamp(2.3rem, 7vw, 4rem);
  line-height: 1;
  color: var(--navy);
}

.donors-count {
  color: var(--muted);
  font-weight: 700;
  margin-top: 8px;
}

.goal-label {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.progress-track {
  width: 100%;
  height: 14px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
  border: 1px solid rgba(24,35,51,0.08);
}

.progress-fill {
  display: block;
  height: 100%;
  width: 26.348%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
}

.goal-note {
  color: var(--muted);
  font-size: 0.92rem;
  text-align: center;
  margin-top: 12px;
}

.give-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 30px;
  align-items: start;
}

.give-inner > div:first-child,
.give-aside {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow);
}

.give-steps {
  display: grid;
  gap: 16px;
  margin-top: 26px;
}

.give-step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 18px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.step-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(24,35,51,0.18);
}

.step-body strong {
  display: block;
  color: var(--ink);
  margin-bottom: 5px;
}

.step-body p {
  color: var(--muted);
  margin-bottom: 0;
}

.give-aside h3 {
  color: var(--navy);
  margin-bottom: 16px;
}

.give-aside p {
  margin-bottom: 10px;
  color: var(--muted);
}

.give-aside strong,
.donor-name {
  color: var(--ink);
}

.wall-header {
  text-align: center;
  margin-bottom: 28px;
}

.wall-header h2 {
  margin-bottom: 8px;
}

.wall-header span,
.wall-note {
  color: var(--muted);
}

.founding-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(154,123,66,0.12);
  color: var(--navy);
  border: 1px solid rgba(154,123,66,0.28);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.donor-category {
  margin-top: 22px;
}

.category-label {
  color: var(--navy);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.82rem;
  margin-bottom: 10px;
}

.donor-list {
  padding: 8px;
  background: rgba(255,255,255,0.86);
}

.donor-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
}

.donor-row:last-child {
  border-bottom: none;
}

.donor-name {
  font-weight: 800;
}

.donor-detail {
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}

.wall-note {
  max-width: 860px;
  margin: 26px auto 0;
  text-align: center;
  font-size: 0.95rem;
}

.vision-inner {
  text-align: center;
}

.vision-inner p {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 860px) {
  .math-grid,
  .give-inner {
    grid-template-columns: 1fr;
  }
  .why-band,
  .math-band,
  .give-band,
  .wall-section,
  .vision-band {
    padding: 54px 5%;
  }
}

@media (max-width: 560px) {
  .goal-label,
  .donor-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .donor-detail {
    text-align: left;
    white-space: normal;
  }
  .give-step {
    grid-template-columns: 1fr;
  }
}

    /* Partner cards sit inside .science-band but have white backgrounds —
       override inherited light text color so descriptions are readable */
    .partner-card p {
      color: var(--muted);
    }

    /* ── Focus Area Cards ─────────────────────────── */
    .focus-grid {
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 20px;
    }
    .focus-card {
      display: flex;
      flex-direction: column;
      padding: 0;
      border-top: 4px solid transparent;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .focus-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-strong);
    }
    .fc-gold  { border-top-color: var(--gold); }
    .fc-blue  { border-top-color: #4a90c4; }
    .fc-green { border-top-color: #4caf88; }
    .fc-navy  { border-top-color: #8fa2b6; }

    .focus-card-icon {
      font-size: 1.8rem;
      padding: 22px 22px 4px;
      line-height: 1;
    }
    .focus-card h3 {
      font-size: 1.1rem;
      color: var(--navy);
      padding: 10px 22px 8px;
      margin: 0;
    }
    .focus-card p {
      font-size: 0.93rem;
      color: var(--muted);
      line-height: 1.65;
      padding: 0 22px 22px;
      margin: 0;
      flex: 1;
    }

    /* ── Program Cards ────────────────────────────── */
    .program-card {
      display: flex;
      flex-direction: column;
      padding: 0;
      overflow: hidden;
    }
    .pc-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 22px;
      border-bottom: 1px solid rgba(255,255,255,0.12);
    }
    .pc-established .pc-header {
      background: linear-gradient(135deg, var(--navy), #1a5080);
      border-top: 4px solid var(--gold);
    }
    .pc-development .pc-header {
      background: linear-gradient(135deg, #1e4d3e, var(--green));
      border-top: 4px solid #4caf88;
    }
    .pc-planned .pc-header {
      background: linear-gradient(135deg, #2a2a4a, #3a3a6a);
      border-top: 4px solid #8fa2b6;
    }
    .pc-status-badge {
      font-size: 0.72rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: rgba(255,255,255,0.95);
      background: rgba(255,255,255,0.14);
      padding: 4px 10px;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,0.25);
    }
    .pc-year {
      font-size: 0.78rem;
      color: rgba(255,255,255,0.65);
      font-family: var(--font-serif);
      font-style: italic;
    }
    .pc-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 22px;
    }
    .pc-body h3 {
      font-size: 1.18rem;
      color: var(--navy);
      margin-bottom: 10px;
    }
    .pc-body p {
      font-size: 0.94rem;
      color: var(--muted);
      line-height: 1.65;
      flex: 1;
      margin-bottom: 20px;
    }
    .pc-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: auto;
      padding-top: 14px;
      border-top: 1px solid var(--line);
    }

    /* ── Scholarships page ────────────────────────── */
    .schol-grid {
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      align-items: stretch;
    }
    .pc-institution {
      font-size: 0.82rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      margin-bottom: 8px;
    }
    .pc-details {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin: 16px 0;
      padding: 14px;
      background: var(--cream);
      border-radius: 8px;
      border: 1px solid var(--line);
    }
    .pc-detail {
      font-size: 0.88rem;
      color: var(--ink);
      display: flex;
      gap: 8px;
    }
    .pc-detail span {
      font-weight: 700;
      color: var(--navy);
      min-width: 80px;
    }

    /* Philosophy band on scholarships page */
    .schol-phil-band .section-title {
      color: var(--light);
    }

    /* Scholarship Timeline */
    .schol-timeline {
      margin-top: 36px;
      display: flex;
      flex-direction: column;
      gap: 0;
      padding-left: 16px;
    }
    .schol-tl-item {
      display: flex;
      gap: 28px;
      position: relative;
    }
    .schol-tl-marker {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-shrink: 0;
      width: 20px;
    }
    .schol-tl-dot {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 3px solid var(--gold);
      background: var(--light);
      flex-shrink: 0;
      margin-top: 4px;
      position: relative;
      z-index: 1;
    }
    .tl-active .schol-tl-dot {
      background: var(--gold);
      border-color: var(--gold);
      box-shadow: 0 0 0 4px rgba(197,155,59,0.2);
    }
    .tl-development .schol-tl-dot {
      background: #4caf88;
      border-color: #4caf88;
      box-shadow: 0 0 0 4px rgba(76,175,136,0.2);
    }
    .tl-planned .schol-tl-dot {
      background: var(--light);
      border-color: #8fa2b6;
    }
    .schol-tl-line {
      width: 2px;
      flex: 1;
      background: linear-gradient(to bottom, var(--gold), var(--line));
      margin: 4px 0;
      min-height: 32px;
    }
    .schol-tl-content {
      padding-bottom: 40px;
      flex: 1;
    }
    .schol-tl-year {
      font-size: 0.78rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--gold);
      margin-bottom: 6px;
    }
    .tl-development .schol-tl-year { color: #3a9a74; }
    .tl-planned .schol-tl-year { color: var(--muted); }
    .schol-tl-content h3 {
      font-size: 1.2rem;
      color: var(--navy);
      margin-bottom: 8px;
    }
    .schol-tl-content p {
      font-size: 0.94rem;
      color: var(--muted);
      line-height: 1.68;
      max-width: 640px;
    }
    .schol-tl-link {
      display: inline-block;
      margin-top: 12px;
      font-size: 0.88rem;
      font-weight: 700;
      color: var(--blue);
    }
    .schol-tl-link:hover { color: var(--gold); }

    /* ── Unified pill-header pattern for focus + transparency cards ── */
    .fc-header,
    .transparency-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 20px;
      border-bottom: 1px solid rgba(255,255,255,0.12);
    }
    /* Focus card header colors */
    .fc-gold .fc-header  { background: linear-gradient(135deg, var(--navy), #1a5080); border-top: 4px solid var(--gold); }
    .fc-blue .fc-header  { background: linear-gradient(135deg, #1a3a6a, #2060a0); border-top: 4px solid #4a90c4; }
    .fc-green .fc-header { background: linear-gradient(135deg, #1e4d3e, var(--green)); border-top: 4px solid #4caf88; }
    .fc-navy .fc-header  { background: linear-gradient(135deg, #2a2a4a, #3a3a6a); border-top: 4px solid #8fa2b6; }

    .fc-badge,
    .tc-badge {
      font-size: 0.72rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: rgba(255,255,255,0.95);
      background: rgba(255,255,255,0.14);
      padding: 4px 10px;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,0.25);
    }
    .fc-label,
    .tc-label-right {
      font-size: 0.78rem;
      color: rgba(255,255,255,0.65);
      font-family: var(--font-serif);
      font-style: italic;
    }
    .fc-body {
      padding: 20px 22px 22px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .fc-body h3 {
      font-size: 1.08rem;
      color: var(--navy);
      margin-bottom: 8px;
      padding: 0;
    }
    .fc-body p {
      font-size: 0.93rem;
      color: var(--muted);
      line-height: 1.65;
      padding: 0;
      margin: 0;
    }

    /* ── TQT page — section kicker visibility in navy bands ── */
    .navy-band .section-kicker,
    .science-band .section-kicker {
      color: var(--gold-soft);
      opacity: 0.85;
    }

    /* award-card header pill pattern */
    .award-card {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .award-card-header {
      background: linear-gradient(135deg, var(--navy), var(--navy-2));
      border-top: 3px solid var(--gold);
      padding: 16px 20px 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .grade-label {
      font-size: 0.7rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: rgba(255,255,255,0.95);
      background: rgba(255,255,255,0.14);
      padding: 3px 10px;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,0.25);
      display: inline-block;
      align-self: flex-start;
    }
    .award-card-header h4 {
      color: var(--light);
      font-size: 1rem;
      margin: 0;
      line-height: 1.3;
    }
    .award-card-header .amount {
      font-size: 0.82rem;
      color: var(--gold-soft);
      font-family: var(--font-serif);
      font-style: italic;
    }
    .award-card-body {
      flex: 1;
      padding: 18px 20px;
      background: rgba(255,255,255,0.97);
    }
    .award-card-body .bi-para {
      margin-bottom: 12px;
    }
    .award-card-body .bi-para:last-child {
      margin-bottom: 0;
    }

    /* ── Founders Letter redesign ─────────────────── */
    .letter-block {
      background: var(--paper) !important;
      border: 1px solid var(--line) !important;
      border-left: 4px solid var(--gold) !important;
      border-radius: var(--radius) !important;
      padding: 40px 48px 36px !important;
      position: relative;
      box-shadow: var(--shadow) !important;
    }
    .letter-block::before {
      content: '\201C';
      font-family: var(--font-serif);
      font-size: 6rem;
      color: var(--gold);
      opacity: 0.2;
      position: absolute;
      top: 4px;
      left: 22px;
      line-height: 1;
      pointer-events: none;
    }
    .letter-en p,
    .letter-vi p {
      font-family: var(--font-serif);
      font-size: 1.03rem;
      color: #2a3545;
      line-height: 1.84;
      margin-bottom: 20px;
    }
    .letter-en p:last-of-type,
    .letter-vi p:last-of-type {
      margin-bottom: 0;
    }
    .u-style-054,
    .u-style-056 {
      display: block;
      margin-top: 28px !important;
      padding-top: 20px;
      border-top: 1px solid var(--line);
      font-family: var(--font-serif) !important;
      font-style: italic !important;
      font-size: 0.97rem;
      color: var(--navy) !important;
    }

/* ═══════════════════════════════════════════════════
   ENDOWMENT PAGE — Full Redesign
   ═══════════════════════════════════════════════════ */

/* Hero goal block */
.goal-block {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(197,155,59,0.4) !important;
  box-shadow: 0 0 0 1px rgba(197,155,59,0.15), var(--shadow-strong) !important;
}
.goal-block .amount {
  color: var(--light) !important;
  font-size: clamp(2.8rem, 8vw, 4.5rem) !important;
}
.goal-block .donors-count {
  color: var(--gold-soft) !important;
}
.goal-block .goal-label {
  color: rgba(255,255,255,0.75) !important;
}
.goal-block .goal-note {
  color: rgba(255,255,255,0.55) !important;
}

/* Why band — warm cream with gold accent */
.why-band {
  background: linear-gradient(135deg, #fdfaf4, var(--cream)) !important;
  border-top: 3px solid var(--gold) !important;
}
.why-inner {
  text-align: center;
}
.why-inner .lead {
  margin-left: auto;
  margin-right: auto;
}

/* Math cells — navy gradient headers */
.math-cell {
  background: #fff !important;
  border-top: 4px solid var(--gold) !important;
  padding: 0 !important;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.math-cell:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-strong) !important;
}
.math-cell .val {
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  color: var(--gold-soft) !important;
  padding: 28px 20px 20px !important;
  margin-bottom: 0 !important;
  font-size: clamp(2.2rem, 5vw, 3rem) !important;
}
.math-cell .val span {
  color: var(--gold-soft) !important;
}
.math-cell .lbl {
  padding: 14px 20px 4px !important;
  color: var(--navy) !important;
}
.math-cell .sub {
  padding: 0 20px 22px !important;
  color: var(--muted) !important;
}

/* Give steps — cleaner with gold number circles */
.give-band {
  background: var(--cream) !important;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.give-step {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-left: 3px solid var(--gold) !important;
  border-radius: 10px !important;
  padding: 20px 22px !important;
  transition: box-shadow 0.2s ease;
}
.give-step:hover {
  box-shadow: var(--shadow-strong);
}
.step-num {
  background: var(--gold) !important;
  color: var(--navy) !important;
  font-size: 1rem;
  box-shadow: none !important;
}
.step-body h4 {
  font-family: var(--font-serif);
  color: var(--navy);
  margin-bottom: 6px;
}

/* Foundation details aside */
.give-aside {
  background: linear-gradient(135deg, var(--navy), var(--navy-2)) !important;
  border: none !important;
  border-top: 4px solid var(--gold) !important;
  color: var(--light) !important;
}
.give-aside h3 {
  color: var(--gold-soft) !important;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 20px !important;
}
.give-aside p {
  color: rgba(255,255,255,0.75) !important;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 10px;
  margin-bottom: 10px !important;
}
.give-aside p:last-child {
  border-bottom: none;
}
.give-aside strong {
  color: rgba(255,255,255,0.95) !important;
}
.give-aside a {
  color: var(--gold-soft) !important;
}
.give-aside hr {
  border-color: rgba(255,255,255,0.12) !important;
}

/* ─── DONOR WALL — centrepiece redesign ─── */
.wall-section {
  background: linear-gradient(160deg, #0f1e30, #1a3a5c) !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: 80px 6% !important;
}
.wall-inner {
  max-width: 860px;
}
.wall-header {
  text-align: center;
  margin-bottom: 48px !important;
}
.wall-header .section-kicker {
  color: var(--gold-soft) !important;
  opacity: 1 !important;
}
.wall-header h2 {
  color: var(--light) !important;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 16px !important;
}
.wall-header p {
  color: rgba(255,255,255,0.65);
  max-width: 600px;
  margin: 16px auto 0;
  font-style: italic;
  font-family: var(--font-serif);
  font-size: 1.02rem;
  line-height: 1.7;
}
.founding-badge {
  background: rgba(197,155,59,0.15) !important;
  border: 1px solid rgba(197,155,59,0.5) !important;
  color: var(--gold-soft) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.14em !important;
  padding: 7px 18px !important;
}
.donor-category {
  margin-top: 36px !important;
}
.category-label {
  font-size: 0.7rem !important;
  letter-spacing: 0.18em !important;
  color: var(--gold) !important;
  border-bottom: 1px solid rgba(197,155,59,0.3);
  padding-bottom: 10px;
  margin-bottom: 0 !important;
}
.donor-list {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
  padding: 0 !important;
  overflow: hidden;
  margin-top: 4px;
}
.donor-row {
  padding: 16px 22px !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  align-items: center;
  transition: background 0.15s ease;
}
.donor-row:hover {
  background: rgba(255,255,255,0.06);
}
.donor-row:last-child {
  border-bottom: none !important;
}
.donor-name {
  color: var(--light) !important;
  font-family: var(--font-serif);
  font-size: 1.06rem;
  font-weight: normal !important;
  letter-spacing: 0.02em;
}
.donor-detail {
  color: var(--gold-soft) !important;
  font-size: 0.84rem;
  font-style: italic;
  font-family: var(--font-serif);
}
.wall-note {
  color: rgba(255,255,255,0.45) !important;
  font-size: 0.88rem !important;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
  margin-top: 36px !important;
}
.wall-note a {
  color: var(--gold-soft) !important;
}

/* Vision band */
.vision-band {
  background: linear-gradient(160deg, var(--navy), #1a3a5c) !important;
  border-top: 3px solid var(--gold) !important;
}
.vision-inner .section-kicker {
  color: var(--gold-soft) !important;
  opacity: 1 !important;
}
.vision-inner h2 {
  color: var(--light) !important;
}
.vision-inner p {
  color: rgba(255,255,255,0.75) !important;
  font-family: var(--font-serif);
  font-size: 1.04rem;
  line-height: 1.8;
}
.vision-inner .u-style-019 {
  color: var(--gold-soft) !important;
  font-weight: 700;
  font-style: italic;
  font-size: 1.1rem !important;
  margin-top: 24px;
}

/* ═══════════════════════════════════════════════════
   TQT FORMS PAGE — Full Redesign
   ═══════════════════════════════════════════════════ */

/* Hero meta strip */
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 28px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(197,155,59,0.3);
  border-radius: 8px;
  overflow: hidden;
}
.hero-meta-item {
  flex: 1;
  min-width: 160px;
  padding: 14px 18px;
  border-right: 1px solid rgba(255,255,255,0.1);
  font-size: 0.84rem;
  color: rgba(255,255,255,0.75);
}
.hero-meta-item:last-child { border-right: none; }
.hero-meta-item strong {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold-soft);
  margin-bottom: 4px;
}

/* Document list */
.doc-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 32px;
}
.doc-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.doc-item:hover {
  box-shadow: var(--shadow-strong);
  transform: translateY(-2px);
}
.doc-num {
  background: linear-gradient(160deg, var(--navy), var(--navy-2));
  border-right: 3px solid var(--gold);
  color: var(--gold-soft);
  font-family: var(--font-serif);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 8px;
  line-height: 1.3;
}
.doc-body {
  padding: 22px 24px;
}
.doc-body h3 {
  font-size: 1.12rem;
  color: var(--navy);
  margin-bottom: 8px;
}
.doc-desc {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 14px;
}
.doc-meta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.doc-tag {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 20px;
}
.tag-sign     { background: rgba(197,155,59,0.12); color: #7a5c1a; border: 1px solid rgba(197,155,59,0.35); }
.tag-bilingual{ background: rgba(31,78,121,0.08);  color: var(--blue); border: 1px solid rgba(31,78,121,0.2); }
.tag-irs      { background: rgba(47,111,94,0.08);  color: var(--green); border: 1px solid rgba(47,111,94,0.25); }
.tag-prereq   { background: rgba(100,60,180,0.08); color: #5b3fa8; border: 1px solid rgba(100,60,180,0.2); }
.tag-secure   { background: rgba(180,50,50,0.08);  color: #9b2929; border: 1px solid rgba(180,50,50,0.2); }
.tag-annual   { background: rgba(15,42,68,0.07);   color: var(--navy); border: 1px solid rgba(15,42,68,0.18); }

/* Download buttons */
.u-style-109 {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap;
}
.u-style-110 {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 8px 16px !important;
  background: var(--navy) !important;
  color: #fff !important;
  border-radius: 4px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: background 0.15s ease;
}
.u-style-110:hover { background: var(--blue) !important; color: #fff !important; }
.u-style-111 {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 8px 16px !important;
  background: transparent !important;
  color: var(--navy) !important;
  border: 1.5px solid var(--navy) !important;
  border-radius: 4px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.15s ease;
}
.u-style-111:hover { background: var(--navy) !important; color: #fff !important; }

/* Doc status badge column */
.doc-status {
  display: flex;
  align-items: flex-start;
  padding: 22px 18px 22px 0;
}
.status-badge {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 5px 12px;
  border-radius: 20px;
  white-space: nowrap;
}
.badge-once   { background: rgba(197,155,59,0.12); color: #7a5c1a; border: 1px solid rgba(197,155,59,0.35); }
.badge-prereq { background: rgba(100,60,180,0.1);  color: #5b3fa8; border: 1px solid rgba(100,60,180,0.25); }
.badge-annual { background: rgba(47,111,94,0.1);   color: var(--green); border: 1px solid rgba(47,111,94,0.3); }
.badge-active { background: rgba(47,111,94,0.1);   color: var(--green); border: 1px solid rgba(47,111,94,0.3); }
.badge-development { background: rgba(31,78,121,0.1); color: var(--blue); border: 1px solid rgba(31,78,121,0.25); }
.badge-planned { background: rgba(100,60,180,0.1); color: #5b3fa8; border: 1px solid rgba(100,60,180,0.25); }

/* Annual cycle table */
.cycle-table-wrap table thead th {
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  color: var(--gold-soft);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 14px 16px;
  border-bottom: 2px solid var(--gold);
  white-space: nowrap;
}
.cycle-table-wrap table tbody tr:hover td {
  background: rgba(197,155,59,0.04);
}
.cycle-table-wrap table td {
  vertical-align: top;
  padding: 14px 16px;
  font-size: 0.91rem;
  line-height: 1.55;
}
.cycle-table-wrap table td:first-child {
  white-space: nowrap;
  color: var(--navy);
  font-weight: 700;
  font-size: 0.88rem;
}
.doc-ref {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blue);
  background: rgba(31,78,121,0.07);
  padding: 2px 8px;
  border-radius: 4px;
}

/* Contact cards */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.contact-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
}
.contact-card h3 {
  font-size: 1.08rem;
  color: var(--navy);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.contact-card p {
  font-size: 0.92rem;
  color: var(--muted);
  margin-bottom: 10px;
}
.contact-card strong {
  color: var(--navy);
  min-width: 90px;
  display: inline-block;
}

@media (max-width: 680px) {
  .doc-item {
    grid-template-columns: 56px 1fr;
  }
  .doc-status { display: none; }
  .hero-meta-item { min-width: 140px; }
}


/* ═══════════════════════════════════════════════════
   HERO LAYOUT — Consolidated fix (replaces all prior hero overrides)
   
   Strategy:
   - index.html (home-page): two-column grid with .snapshot — no changes needed, original CSS handles it
   - tqt.html + tqt-viet.html (tqt-page): two-column grid with .hero-card — explicitly restored
   - All other secondary pages: single-column, constrained, centered
   ═══════════════════════════════════════════════════ */

/* 1. Constrain all secondary page heroes to single-column */
body.secondary-page .hero {
  text-align: center;
}
body.secondary-page .hero-inner {
  display: block !important;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
body.secondary-page .hero h1 {
  font-size: clamp(1.6rem, 3.2vw, 2.6rem) !important;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: -0.01em;
}
body.secondary-page .hero p {
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
}

/* 2. Restore two-column for tqt pages (hero-card on right) */
body.secondary-page.tqt-page .hero {
  text-align: left;
}
body.secondary-page.tqt-page .hero-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.75fr);
  gap: 48px;
  align-items: center;
  max-width: 1120px;
}
body.secondary-page.tqt-page .hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.8rem) !important;
  max-width: none;
  margin-left: 0;
}
body.secondary-page.tqt-page .hero p {
  max-width: none;
  margin-left: 0;
}

/* 3. Home page — ensure two-column is never broken */
body.home-page .hero {
  text-align: left;
}
body.home-page .hero-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.75fr);
  gap: 48px;
  align-items: center;
  max-width: 1120px;
}
body.home-page .hero h1 {
  font-size: clamp(2.1rem, 5vw, 4.2rem) !important;
  max-width: none;
  margin-left: 0;
}
body.home-page .hero p {
  max-width: 580px;
  margin-left: 0;
}

@media (max-width: 780px) {
  body.home-page .hero-inner,
  body.secondary-page.tqt-page .hero-inner {
    display: block !important;
  }
  body.home-page .hero,
  body.secondary-page.tqt-page .hero {
    text-align: left;
  }
  body.home-page .hero h1,
  body.secondary-page.tqt-page .hero h1 {
    font-size: clamp(1.9rem, 7vw, 2.8rem) !important;
  }
  body.secondary-page .hero h1 {
    font-size: clamp(1.5rem, 6.5vw, 2.2rem) !important;
  }
}