/* GMA Capital Partners — gmacp.com
   Container 840px, centered. Body 10px Arial #595959 / line-height 14px.
   Two 400px columns, 40px gap. Wordmark 14px #AD8863. Nav 10px uppercase
   #595959 (current/hover #AD8863). Page title 12px #595959 (light).
   Subheadings 10px bold #595959. Footer 9px #595959. */

:root {
  --gold: #ad8863;        /* decorative gold (list markers); fails AA as text — do not use for text */
  --gold-text: #946f4a;   /* text gold: wordmark, links, current nav — 4.53:1 on white, passes WCAG AA */
  --gold-deep: #7a5b3b;   /* hover state, one step darker than --gold-text */
  --grey: #595959;   /* body, nav, headings, footer — the site's single grey */
  --line: #dcdcdc;
  --maxw: 840px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--grey);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  line-height: 14px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold-text); text-decoration: none; }
a:hover { color: var(--gold-deep); }
img { max-width: 100%; display: block; }

/* Single centered column holding the whole page */
.page {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px 0 44px;
}

/* ---------------- Header ---------------- */
.brand-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 18px;
}
.brand-row img { height: 25px; width: auto; }
.brand-name {
  color: var(--gold-text);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 19.6px;
  letter-spacing: normal;
  white-space: nowrap;
}
.brand-name:hover { color: var(--gold-text); }

.menu-toggle {
  display: none;
  /* padding + negative margins enlarge the tap target (~38x38px) without moving the glyph */
  padding: 10px;
  margin: -10px -10px -10px auto;
  background: none; border: 0;
  font-size: 18px; line-height: 1;
  color: var(--gold-text); cursor: pointer;
}

nav.main-nav { margin: 0 0 4px; }
nav.main-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 20px;
}
nav.main-nav li { position: relative; }
nav.main-nav a {
  color: var(--grey);
  font-size: 10px;
  line-height: 14px;
  letter-spacing: normal;
  text-transform: uppercase;
  font-weight: 400;
  display: inline-block;
}
nav.main-nav a:hover,
nav.main-nav li.current > a { color: var(--gold-text); }

/* ---------------- Banner ---------------- */
.banner { margin: 0 0 17px; }
.banner img { width: 100%; height: auto; }   /* images are 1680x420 native (2x of the 840px container) */

/* ---------------- Page body ---------------- */
.page-title {
  color: var(--grey);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 16.8px;
  letter-spacing: normal;
  text-transform: uppercase;
  margin: 0 0 18px;
}

/* Two authored columns (400px each, 40px gap) placed side by side, matching the
   live site's fixed split — NOT CSS column balancing (which orphaned lead-ins). */
.body.cols {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}
.body.cols .col { flex: 1 1 0; min-width: 0; }
.body.cols .col > *:first-child { margin-top: 0; }
.body p {
  margin: 0 0 14px;
  text-align: justify;
}
.body .lead { text-align: left; }
/* Body subheadings (Strategy / Our Activities sections, legal clause headings) are
   <h2> under the page <h1> — proper heading hierarchy, no skipped levels. */
.body h2 {
  font-size: 10px;
  font-weight: 700;
  color: var(--grey);
  margin: 14px 0 0;
}
.body h2 a { color: var(--grey); }
.body h2 a:hover { color: var(--gold-text); }
.body ul { margin: 0 0 14px; padding-left: 16px; }
.body li { margin: 0 0 2px; }
.body li::marker { color: var(--gold); }

/* Contact — short single (half-width) text block, as on the live site */
.body.contact-block { column-count: 1; max-width: 400px; }
.contact-block .org { font-weight: 700; }
.contact-block p { text-align: justify; }
.note { text-align: justify; }

/* Footer legal pages — "Last updated" line under the page title */
.updated { font-size: 9px; line-height: 12.6px; color: var(--grey); margin: -10px 0 14px; }

/* ---------------- Footer ---------------- */
.foot-rule {
  border: 0; border-top: 1px solid var(--line);
  margin: 16px 0 10px;
}
.site-footer {
  color: var(--grey);
  font-size: 9px;
  line-height: 12.6px;
}
.site-footer p { margin: 0; }
.site-footer a { color: var(--grey); }
.site-footer a:hover { color: var(--gold-text); }
.site-footer .sep { margin: 0 5px; }

/* ---------------- Responsive ---------------- */
@media (max-width: 880px) {
  .page { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 600px) {
  .menu-toggle { display: block; }
  nav.main-nav ul { display: none; flex-direction: column; align-items: stretch; gap: 0; }
  nav.main-nav ul.open { display: flex; }
  nav.main-nav a { padding: 8px 0; }
  .body.cols { flex-direction: column; gap: 0; }
  .body.contact-block { max-width: none; }
}