/* ============================================
   AMPKen — Professional Light Theme
   Fonts: DM Sans (body) + Playfair Display (headings)
   FIXED: header visibility, body offset, mobile nav
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Playfair+Display:wght@600;700&display=swap');

/* ── Tokens ── */
:root {
   --navy: #0d1b2a;
   --navy-mid: #1b2d42;
   --navy-light: #2c415a;
   --gold: #b8860b;
   --gold-bright: #d4a017;
   --gold-pale: rgba(180, 134, 11, .09);
   --gold-line: rgba(180, 134, 11, .3);

   --bg: #ffffff;
   --bg-soft: #f6f8fb;
   --bg-card: #ffffff;
   --border: #e2e8f0;
   --border-mid: #c8d4e0;

   --text-h: #0d1b2a;
   --text-body: #3d4f61;
   --text-mute: #7a8fa3;

   --font-h: 'Playfair Display', Georgia, serif;
   --font-body: 'DM Sans', system-ui, sans-serif;

   --r-sm: 6px;
   --r-md: 10px;
   --r-lg: 16px;
   --r-xl: 24px;

   --nav-h: 64px;
   --ease: cubic-bezier(.4, 0, .2, 1);

   --shadow-xs: 0 1px 2px rgba(13, 27, 42, .05);
   --shadow-sm: 0 2px 8px rgba(13, 27, 42, .07);
   --shadow-md: 0 6px 20px rgba(13, 27, 42, .1);
   --shadow-lg: 0 16px 40px rgba(13, 27, 42, .13);
}

/* ── Reset ── */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html {
   scroll-behavior: smooth;
}

body {
   font-family: var(--font-body);
   font-size: 15px;
   line-height: 1.65;
   background: var(--bg);
   color: var(--text-body);
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
   /* FIX: ensure body always has top offset for fixed header */
   padding-top: var(--nav-h);
}

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

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

ul {
   list-style: none;
}

/* ── Layout ── */
.container {
   width: 100%;
   max-width: 1160px;
   margin: 0 auto;
   padding: 0 1.75rem;
}

.section {
   padding: 5rem 0;
}

/* ── Typography ── */
h1,
h2,
h3,
h4 {
   font-family: var(--font-h);
   color: var(--text-h);
   line-height: 1.2;
   letter-spacing: -.01em;
}

h1 { font-size: 2.6rem; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.05rem; }

.overline {
   display: block;
   font-family: var(--font-body);
   font-size: .7rem;
   font-weight: 600;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--gold);
   margin-bottom: .6rem;
}

.lead {
   font-size: 1.05rem;
   color: var(--text-mute);
   line-height: 1.8;
   max-width: 580px;
}

.section-head {
   margin-bottom: 2.5rem;
}

.section-head h2 {
   margin-top: .35rem;
}

.section-head .lead {
   margin-top: .75rem;
}

/* ── Tag / Badge ── */
.tag {
   display: inline-block;
   padding: .28rem .85rem;
   border-radius: 50px;
   font-size: .7rem;
   font-weight: 600;
   letter-spacing: .1em;
   text-transform: uppercase;
   background: var(--gold-pale);
   color: var(--gold);
   border: 1px solid var(--gold-line);
}

/* ── Buttons ── */
.btn {
   display: inline-flex;
   align-items: center;
   gap: .45rem;
   padding: .62rem 1.4rem;
   border-radius: var(--r-sm);
   font-family: var(--font-body);
   font-weight: 600;
   font-size: .875rem;
   cursor: pointer;
   border: none;
   transition: all .2s var(--ease);
}

.btn-primary {
   background: var(--navy);
   color: #fff;
}

.btn-primary:hover {
   background: var(--navy-mid);
   transform: translateY(-1px);
   box-shadow: var(--shadow-md);
}

.btn-gold {
   background: var(--gold-bright);
   color: #fff;
}

.btn-gold:hover {
   background: var(--gold);
   transform: translateY(-1px);
   box-shadow: 0 4px 14px rgba(180, 134, 11, .35);
}

.btn-outline {
   background: transparent;
   color: var(--text-h);
   border: 1.5px solid var(--border-mid);
}

.btn-outline:hover {
   border-color: var(--navy);
   color: var(--navy);
}

.btn-outline-white {
   background: transparent;
   color: #fff;
   border: 1.5px solid rgba(255, 255, 255, .3);
}

.btn-outline-white:hover {
   border-color: #fff;
}

/* ── Gold Rule ── */
.gold-rule {
   width: 40px;
   height: 3px;
   background: var(--gold-bright);
   border-radius: 2px;
   margin: .8rem 0 1.4rem;
}

/* =======================
   HEADER  — FIX APPLIED
   ======================= */
.site-header {
   position: fixed;
   top: 0;
   left: 0;              /* FIX: explicit left:0 ensures full width */
   width: 100%;
   z-index: 1000;        /* FIX: raised from 200 → 1000 so nothing overlaps it */
   height: var(--nav-h);
   background: var(--navy) !important;   /* FIX: !important prevents any cascade override */
   border-bottom: 2px solid var(--gold-bright);
   /* FIX: explicit colour so browser never renders a white fallback */
   color: #ffffff;
}

.header-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 100%;
}

.logo {
   display: flex;
   align-items: center;
   gap: .65rem;
}

.logo img {
   height: 34px;
   width: auto;
   border-radius: 4px;
}

.logo-text {
   font-family: var(--font-body);
   font-weight: 700;
   font-size: 1.05rem;
   color: #fff;
   letter-spacing: .02em;
}

.logo-text span {
   color: var(--gold-bright);
}

.main-nav {
   display: flex;
   align-items: center;
   gap: 1.5rem;
}

.nav-link {
   font-size: .875rem;
   font-weight: 500;
   color: rgba(255, 255, 255, .75);
   transition: color .18s;
}

.nav-link:hover,
.nav-link.active {
   color: #fff;
}

.nav-cta {
   padding: .5rem 1.15rem;
   border-radius: var(--r-sm);
   font-weight: 600;
   font-size: .82rem;
   background: var(--gold-bright);
   color: var(--navy);
   transition: background .18s;
}

.nav-cta:hover {
   background: var(--gold);
}

.hamburger {
   display: none;
   flex-direction: column;
   gap: 4px;
   cursor: pointer;
   border: none;
   background: none;
   padding: 4px;
}

.hamburger span {
   display: block;
   width: 20px;
   height: 2px;
   background: #fff;
   border-radius: 2px;
   transition: .25s;
}

/* FIX: removed 'main { padding-top }' — body now carries the offset.
   This prevents double-offset on pages that don't use a <main> tag. */
main {
   padding-top: 0;
}

/* =======================
   HERO
   ======================= */
.hero {
   background: var(--navy);
   position: relative;
   overflow: hidden;
}

.hero-inner {
   display: grid;
   grid-template-columns: 1fr 1fr;
   min-height: 520px;
   align-items: stretch;
}

.hero-text {
   padding: 4rem 3.5rem 4rem 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.hero-text h1 {
   color: #fff;
   font-size: 2.8rem;
   line-height: 1.12;
}

.hero-text h1 span {
   color: var(--gold-bright);
}

.hero-text .lead {
   color: rgba(255, 255, 255, .65);
   margin-top: 1rem;
   font-size: 1rem;
   max-width: 440px;
}

.hero-actions {
   display: flex;
   gap: .85rem;
   flex-wrap: wrap;
   margin-top: 2rem;
}

.hero-stats {
   display: flex;
   gap: 2rem;
   margin-top: 2.5rem;
   padding-top: 2rem;
   border-top: 1px solid rgba(255, 255, 255, .1);
}

.stat-num {
   font-family: var(--font-h);
   font-size: 1.8rem;
   font-weight: 700;
   color: var(--gold-bright);
   line-height: 1;
}

.stat-label {
   font-size: .72rem;
   color: rgba(255, 255, 255, .45);
   text-transform: uppercase;
   letter-spacing: .07em;
   margin-top: .3rem;
}

.hero-image {
   position: relative;
   overflow: hidden;
}

.hero-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   display: block;
}

.hero-image::after {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   width: 60px;
   background: linear-gradient(to right, var(--navy), transparent);
}

/* =======================
   CARDS / BENTO
   ======================= */
.card {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: var(--r-lg);
   padding: 1.75rem;
   box-shadow: var(--shadow-xs);
   transition: box-shadow .22s var(--ease), transform .22s var(--ease), border-color .22s;
}

.card:hover {
   box-shadow: var(--shadow-md);
   transform: translateY(-3px);
   border-color: var(--border-mid);
}

.feature-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 1.25rem;
}

.feature-icon {
   width: 40px;
   height: 40px;
   border-radius: var(--r-md);
   background: var(--gold-pale);
   border: 1px solid var(--gold-line);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.1rem;
   margin-bottom: 1rem;
}

.feature-title {
   font-size: 1rem;
   font-family: var(--font-body);
   font-weight: 600;
   color: var(--text-h);
   margin-bottom: .4rem;
}

.feature-body {
   font-size: .85rem;
   color: var(--text-mute);
   line-height: 1.7;
}

/* =======================
   EXECUTIVE
   ======================= */
.exec-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.5rem;
}

.exec-card-chairman {
   grid-column: 1 / -1;
   max-width: 720px;
   justify-self: center;
   width: 90%;
}

.exec-card {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-left: 4px solid var(--gold-bright);
   border-radius: var(--r-lg);
   overflow: hidden;
   box-shadow: var(--shadow-sm);
   transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-left-color .25s;
   display: flex;
   flex-direction: row;
   align-items: center;
   width: 100%;
}

.exec-card:hover {
   box-shadow: var(--shadow-md);
   transform: translateY(-4px);
   border-left-color: var(--gold);
}

.exec-photo {
   width: 90px;
   height: 110px;
   object-fit: cover;
   object-position: top center;
   background: #dce5ef;
   display: block;
   flex-shrink: 0;
}

.exec-body {
   padding: 1rem 1.2rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: .25rem;
   flex: 1;
}

.exec-role {
   font-size: .62rem;
   font-weight: 700;
   letter-spacing: .13em;
   text-transform: uppercase;
   color: var(--gold);
}

.exec-name {
   font-family: var(--font-body);
   font-size: .98rem;
   font-weight: 700;
   color: var(--text-h);
   line-height: 1.25;
}

.exec-divider {
   width: 24px;
   height: 2px;
   background: var(--gold-bright);
   border-radius: 2px;
   margin: .2rem 0;
}

.exec-term {
   font-size: .73rem;
   color: var(--text-mute);
}

/* =======================
   MEMBERSHIP
   ======================= */
.plans-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.25rem;
}

.plan-card {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: var(--r-lg);
   padding: 2rem;
   display: flex;
   flex-direction: column;
   box-shadow: var(--shadow-xs);
   transition: box-shadow .22s, transform .22s;
   position: relative;
}

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

.plan-card.featured {
   background: var(--navy);
   border-color: var(--navy);
   color: #fff;
}

.plan-card.featured .plan-name,
.plan-card.featured .plan-feat-item {
   color: #fff;
}

.plan-card.featured .plan-sub {
   color: rgba(255, 255, 255, .6);
}

.plan-card.featured .check {
   color: var(--gold-bright);
}

.plan-badge {
   position: absolute;
   top: -11px;
   left: 50%;
   transform: translateX(-50%);
   background: var(--gold-bright);
   color: var(--navy);
   font-size: .65rem;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   padding: .28rem 1rem;
   border-radius: 50px;
   white-space: nowrap;
}

.plan-icon {
   width: 40px;
   height: 40px;
   border-radius: var(--r-md);
   background: var(--gold-pale);
   border: 1px solid var(--gold-line);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.1rem;
   margin-bottom: 1.1rem;
}

.plan-card.featured .plan-icon {
   background: rgba(212, 160, 23, .15);
   border-color: rgba(212, 160, 23, .25);
}

.plan-name {
   font-family: var(--font-body);
   font-size: 1.1rem;
   font-weight: 700;
   color: var(--text-h);
}

.plan-sub {
   font-size: .83rem;
   color: var(--text-mute);
   margin: .4rem 0 1.2rem;
   line-height: 1.6;
}

.plan-features {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: .6rem;
   margin-bottom: 1.5rem;
}

.plan-feat-item {
   display: flex;
   align-items: flex-start;
   gap: .6rem;
   font-size: .83rem;
   color: var(--text-body);
   line-height: 1.55;
}

.check {
   color: var(--gold);
   font-size: .72rem;
   margin-top: 3px;
   flex-shrink: 0;
}

/* =======================
   NEWS TICKER
   ======================= */
.ticker-bar {
   background: var(--navy-mid);
   color: var(--gold-bright);
   padding: .5rem 0;
   overflow: hidden;
}

.ticker-inner {
   display: flex;
}

.ticker-track {
   display: flex;
   animation: marquee 40s linear infinite;
   white-space: nowrap;
}

.ticker-item {
   padding: 0 2.5rem;
   font-size: .8rem;
   font-weight: 600;
   letter-spacing: .02em;
}

@keyframes marquee {
   from { transform: translateX(0); }
   to   { transform: translateX(-50%); }
}

/* News cards */
.news-layout {
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: 1.5rem;
}

.news-main {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: var(--r-lg);
   overflow: hidden;
   box-shadow: var(--shadow-xs);
   transition: box-shadow .22s, transform .22s;
   display: block;
}

.news-main:hover {
   box-shadow: var(--shadow-md);
   transform: translateY(-3px);
}

.news-main-img {
   width: 100%;
   height: 280px;
   object-fit: cover;
   display: block;
}

.news-main-body {
   padding: 1.75rem;
}

.news-date {
   font-size: .73rem;
   color: var(--text-mute);
   font-weight: 500;
   margin-bottom: .6rem;
   text-transform: uppercase;
   letter-spacing: .07em;
}

.news-headline {
   font-size: 1.35rem;
   color: var(--text-h);
   line-height: 1.35;
   margin-bottom: .75rem;
}

.news-excerpt {
   font-size: .875rem;
   color: var(--text-mute);
   line-height: 1.75;
}

.read-more {
   display: inline-flex;
   align-items: center;
   gap: .35rem;
   font-size: .8rem;
   font-weight: 600;
   color: var(--gold);
   margin-top: 1rem;
}

.news-side {
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.news-card {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: var(--r-lg);
   overflow: hidden;
   box-shadow: var(--shadow-xs);
   transition: box-shadow .22s, transform .22s;
   display: block;
}

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

.news-card-img {
   width: 100%;
   height: 120px;
   object-fit: cover;
   display: block;
}

.news-card-body {
   padding: 1rem;
}

.news-card-title {
   font-size: .9rem;
   font-weight: 600;
   color: var(--text-h);
   line-height: 1.4;
}

.news-card-date {
   font-size: .72rem;
   color: var(--text-mute);
   margin-top: .4rem;
}

/* =======================
   CONTACTS
   ======================= */
.contact-wrap {
   display: grid;
   grid-template-columns: 1fr 1.5fr;
   gap: 2rem;
   align-items: start;
}

.contact-panel {
   background: var(--navy);
   border-radius: var(--r-xl);
   padding: 2.5rem;
   color: #fff;
}

.contact-panel .overline {
   color: rgba(255, 255, 255, .45);
}

.c-item {
   display: flex;
   gap: 1rem;
   margin-bottom: 1.75rem;
   align-items: flex-start;
}

.c-icon-box {
   width: 38px;
   height: 38px;
   min-width: 38px;
   background: rgba(212, 160, 23, .15);
   border: 1px solid rgba(212, 160, 23, .25);
   border-radius: var(--r-md);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--gold-bright);
   font-size: .9rem;
}

.c-label {
   font-size: .68rem;
   text-transform: uppercase;
   letter-spacing: .12em;
   color: rgba(255, 255, 255, .4);
   margin-bottom: .2rem;
}

.c-val {
   font-size: .9rem;
   color: #fff;
   line-height: 1.5;
}

.c-val a {
   color: rgba(255, 255, 255, .85);
   transition: color .18s;
}

.c-val a:hover {
   color: var(--gold-bright);
}

.contact-form-wrap {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: var(--r-xl);
   padding: 2.5rem;
   box-shadow: var(--shadow-sm);
}

.form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1rem;
}

.form-group {
   margin-bottom: 1rem;
}

.form-label {
   display: block;
   font-size: .72rem;
   font-weight: 600;
   color: var(--text-mute);
   letter-spacing: .07em;
   text-transform: uppercase;
   margin-bottom: .4rem;
}

.form-input {
   width: 100%;
   padding: .7rem .9rem;
   background: var(--bg-soft);
   border: 1px solid var(--border);
   border-radius: var(--r-md);
   color: var(--text-h);
   font-family: var(--font-body);
   font-size: .9rem;
   transition: border-color .18s, box-shadow .18s;
}

.form-input:focus {
   outline: none;
   border-color: var(--navy-light);
   box-shadow: 0 0 0 3px rgba(13, 27, 42, .1);
}

.form-input::placeholder {
   color: var(--text-mute);
}

textarea.form-input {
   min-height: 120px;
   resize: vertical;
}

/* =======================
   PAGE HERO (inner pages)
   ======================= */
.page-hero {
   background: var(--bg-soft);
   border-bottom: 1px solid var(--border);
   padding: 4rem 0 3rem;
}

.page-hero h1 {
   margin-top: .35rem;
   font-size: 2.25rem;
}

.page-hero .lead {
   margin-top: .65rem;
}

/* =======================
   ABOUT EXTRAS
   ======================= */
.two-col {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2.5rem;
   align-items: start;
}

.values-row {
   display: flex;
   flex-wrap: wrap;
   gap: .75rem;
   margin-top: 1.5rem;
}

.value-chip {
   background: var(--bg-soft);
   border: 1px solid var(--border);
   border-radius: 50px;
   padding: .45rem 1.1rem;
   font-size: .83rem;
   font-weight: 600;
   color: var(--text-h);
   display: flex;
   align-items: center;
   gap: .5rem;
}

.value-chip i {
   color: var(--gold);
}

.obj-list {
   display: flex;
   flex-direction: column;
   gap: .75rem;
   margin-top: 1.5rem;
}

.obj-item {
   display: flex;
   gap: .85rem;
   align-items: flex-start;
   font-size: .9rem;
   color: var(--text-body);
   line-height: 1.6;
}

.obj-num {
   min-width: 26px;
   height: 26px;
   background: var(--gold-pale);
   border: 1px solid var(--gold-line);
   border-radius: var(--r-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: .72rem;
   font-weight: 700;
   color: var(--gold);
   flex-shrink: 0;
   margin-top: 1px;
}

/* =======================
   CTA STRIP
   ======================= */
.cta-strip {
   background: var(--navy);
   padding: 3.5rem 0;
   text-align: center;
}

.cta-strip h2 {
   color: #fff;
   font-size: 1.75rem;
}

.cta-strip p {
   color: rgba(255, 255, 255, .6);
   margin: .65rem auto 1.75rem;
   max-width: 480px;
   font-size: .95rem;
}

/* =======================
   FOOTER
   ======================= */
.site-footer {
   background: var(--navy);
   color: rgba(255, 255, 255, .55);
   padding: 4rem 0 1.75rem;
   border-top: 2px solid var(--gold-bright);
}

.footer-grid {
   display: grid;
   grid-template-columns: 1.75fr 1fr 1fr 1fr;
   gap: 2.5rem;
   margin-bottom: 3rem;
}

.footer-brand p {
   font-size: .85rem;
   line-height: 1.75;
   max-width: 260px;
   margin-top: .9rem;
}

.footer-socials {
   display: flex;
   gap: .6rem;
   margin-top: 1.25rem;
}

.social-btn {
   width: 34px;
   height: 34px;
   border: 1px solid rgba(255, 255, 255, .15);
   border-radius: var(--r-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: .8rem;
   color: rgba(255, 255, 255, .5);
   transition: all .2s;
}

.social-btn:hover {
   border-color: var(--gold-bright);
   color: var(--gold-bright);
}

.footer-col h4 {
   font-family: var(--font-body);
   font-size: .72rem;
   font-weight: 700;
   letter-spacing: .13em;
   text-transform: uppercase;
   color: #fff;
   margin-bottom: 1rem;
}

.footer-links {
   display: flex;
   flex-direction: column;
   gap: .6rem;
}

.footer-links a,
.footer-links span {
   font-size: .85rem;
   color: rgba(255, 255, 255, .5);
   transition: color .18s;
   line-height: 1.5;
}

.footer-links a:hover {
   color: var(--gold-bright);
}

.footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, .08);
   padding-top: 1.5rem;
   display: flex;
   justify-content: space-between;
   font-size: .8rem;
}

/* =======================
   SCROLL REVEAL
   ======================= */
.reveal {
   opacity: 0;
   transform: translateY(18px);
   transition: opacity .55s var(--ease), transform .55s var(--ease);
}

.reveal.visible {
   opacity: 1;
   transform: translateY(0);
}

/* =======================
   RESPONSIVE
   ======================= */
@media (max-width: 960px) {
   .hero-inner {
      grid-template-columns: 1fr;
   }

   .hero-image {
      display: none;
   }

   .hero-text {
      padding: 3.5rem 0;
   }

   .two-col {
      grid-template-columns: 1fr;
   }

   .news-layout {
      grid-template-columns: 1fr;
   }

   .plans-grid {
      grid-template-columns: 1fr 1fr;
   }

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

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

   .exec-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .exec-card-chairman {
      grid-column: 1 / -1;
      max-width: 100%;
   }
}

@media (max-width: 640px) {
   h1 { font-size: 2rem; }
   h2 { font-size: 1.5rem; }

   .plans-grid {
      grid-template-columns: 1fr;
   }

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

   .footer-bottom {
      flex-direction: column;
      gap: .75rem;
      text-align: center;
   }

   /* FIX: mobile nav sits correctly below fixed header */
   .main-nav {
      display: none;
      flex-direction: column;
      position: fixed;           /* FIX: fixed (not absolute) so it scrolls with page */
      top: var(--nav-h);
      left: 0;
      right: 0;
      background: var(--navy);
      padding: 1.25rem;
      gap: .6rem;
      border-bottom: 1px solid rgba(255, 255, 255, .1);
      z-index: 999;              /* FIX: just below header z-index */
   }

   .main-nav.open {
      display: flex;
   }

   .hamburger {
      display: flex;
   }

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

   .hero-stats {
      flex-wrap: wrap;
      gap: 1.25rem;
   }

   .exec-grid {
      grid-template-columns: 1fr;
   }

   .exec-card-chairman {
      grid-column: 1 / -1;
      max-width: 100%;
   }
}