/* ============== GLOBALS ============== */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#F5F5F5;color:#0f172a;font-family:Almarai,system-ui,sans-serif}
img{max-width:100%;height:auto}

/* Page stage — centers a fixed 1800px-wide comp */
.page{ width:1800px; margin:0 auto; background:#fff } /* remove #fff if you don't want it */

/* Simple container for non-hero sections */
.container{ max-width:1200px; margin:0 auto; padding:0 16px }

/* ============== HEADER (exact px) ============== */
.site-header{ background:#0E2742; color:#fff; border-bottom:1px solid rgba(255,255,255,.10) }
.header-frame{
  position:relative; width:1800px; height:112px; margin:0 auto;
}

/* logo from your coords */
.brand{ position:absolute; left:91px; top:41px }
.brand-logo{ height:73.43px; width:auto; display:block }

/* nav items EXACT positions (from your dump) */
.main-nav{ position:relative; width:1800px; height:112px }
.main-nav a{
  position:absolute; top:47px;
  font-weight:700; font-size:16px; line-height:31px;
  text-transform:uppercase; color:#fff; text-decoration:none;
}

/* exact left offsets */
.main-nav .nav-about  { left:729px;  }  /* About Jeffrey */
.main-nav .nav-stand  { left:937px;  }  /* What I Stand For */
.main-nav .nav-voting { left:1161px; }  /* Voting Information */
.main-nav .nav-contact{ left:1416px; }  /* Contact */
.main-nav .nav-fr     { left:1692px; font-weight:800; font-size:18px; } /* FR */

/* ============== HERO (exact px) ============== */
.hero{ position:relative; width:1800px; height:1024px; overflow:hidden; color:#fff;
  background: linear-gradient(180deg, #1F3265 0%, #2A407B 19.23%, #364E8E 50%, #122558 83.17%, #040F2A 100%);
}
.hero-frame{ position:relative; width:1800px; height:1024px }

/* left copy — placed as a block; adjust if you want exact px */
.copy{ position:absolute; left:120px; top:160px; width:560px }
.h1{
  margin:0 0 10px; text-transform:uppercase; font-weight:800; line-height:1.05;
  font-size:64px; /* adjust if your exact size differs */
}
.lede{ margin:6px 0 18px; font-size:16px; color:rgba(234,242,255,.9) }
.kicker{
  display:inline-flex; gap:8px; align-items:center; color:#98CDE0; text-decoration:none;
  font-weight:800; font-size:12px; letter-spacing:.08em;
}
.kicker:hover{text-decoration:underline}
.kicker-meta{ margin-top:6px; font-size:14px; color:rgba(234,242,255,.75) }

/* portrait from your coords */
.portrait{
  position:absolute; left:581px; top:28px; width:742px; height:auto;
  filter: drop-shadow(0 0 190px rgba(236,250,255,0.30));
}

/* vote lockup from your coords */
.vote{
  position:absolute; left:1199px; top:251px; width:518px; text-align:center; color:#fff;
}
.vote .top{ display:flex; justify-content:center; align-items:center; gap:8px }
.vote .word{ font-weight:700; font-size:32px; line-height:44px; text-transform:uppercase; color:#98CDE0 }
.vote .name{ margin-top:12px; font-weight:800; font-size:54px; line-height:54px; text-transform:uppercase }
.vote .seat{ margin-top:4px; font-weight:700; font-size:26px; line-height:44px; text-transform:uppercase; color:#98CDE0 }

/* ============== RED CARD (right align, overlap) ============== */
.redCard-wrap{ position:relative; margin-top:-110px }
.redCard-inner{ width:1800px; margin:0 auto; position:relative }
.redCard{
  position:absolute; right:120px; /* adjust this if your comp differs */
  width:380px; background:#D84545; color:#fff; border-radius:18px; padding:22px 22px 24px;
  border:1px solid rgba(255,255,255,.18); box-shadow:0 14px 36px rgba(0,0,0,.18);
}
.redCard-title{ margin:0 0 14px; font-weight:800; font-size:16px; letter-spacing:.08em }
.rc-group{ margin-top:14px }
.rc-label{ margin:0 0 8px; font-weight:800; font-size:12px; letter-spacing:.12em; opacity:.95 }
.rc-item{ margin:0 0 8px; font-size:14px; line-height:1.6 }
.rc-item a{ color:#fff; text-decoration:underline }
.rc-cta{
  display:inline-flex; align-items:center; justify-content:center; margin-top:10px;
  background:#fff; color:#10243f; font-weight:800; font-size:14px; padding:12px 16px; border-radius:999px; text-decoration:none;
}
.rc-cta:hover{ filter:brightness(.92) }

/* ============== REST OF PAGE (basic styles; keep as-is or tweak) ============== */
.section{ padding:64px 0 }
.section-h{ font-weight:800; font-size:32px; margin:0 0 12px }
.section-h.center{ text-align:center }
.section-p{ color:#5b6b86; max-width:720px; font-size:16px }

.cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:24px }
.card{ background:#fff; border:1px solid rgba(2,18,43,.1); border-radius:12px; padding:18px; box-shadow:0 10px 30px rgba(0,0,0,.12) }
.card-title{ font-weight:800; font-size:16px; color:#1B4F82; margin:10px 0 6px }
.card-body{ font-size:14px; line-height:1.6; color:#334155 }

/* About band */
.about-band{ background:linear-gradient(180deg,#123E6B 0%, #1B4F82 100%); color:#fff }
.about-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:40px; align-items:start; padding:64px 0 }
.about-kicker{ text-transform:uppercase; letter-spacing:.06em; opacity:.8; font-size:14px }
.about-h{ font-weight:800; font-size:32px; margin:8px 0 0 }
.about-text p{ color:rgba(255,255,255,.9); font-size:16px; line-height:1.6 }
.about-media{ position:relative }
.about-media img{ display:block; max-height:640px; margin:0 auto; object-fit:contain }
.about-watermark{ position:absolute; left:0; bottom:-24px; font-weight:800; font-size:120px; color:rgba(255,255,255,.2); pointer-events:none; white-space:nowrap }

/* Assist */
.assist .container{ padding:64px 16px }
.assist-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px }
.assist-card{ background:linear-gradient(180deg,#1B4F82 0%, #123E6B 100%); color:#EAF2FF; border-radius:18px; padding:22px; border:1px solid rgba(255,255,255,.08); box-shadow:0 14px 36px rgba(0,0,0,.18) }
.assist-title{ font-weight:800; font-size:18px; margin:0 0 8px }
.assist-body{ font-size:14px; color:rgba(234,242,255,.9); margin:0 0 14px }
.assist-btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; border-radius:999px; background:#fff; color:#10243f; font-weight:800; font-size:14px; text-decoration:none }

/* Voting cards */
.voting .container{ padding-bottom:80px }
.vote-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px }
.vote{ background:#E0F0F9; border:1px solid rgba(2,18,43,.12); border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.12); overflow:hidden }
.vote-title{ font-weight:800; font-size:16px; color:#10243f; margin:16px 16px 8px }
.vote-media{ position:relative; height:160px; margin:0 16px 10px; border-radius:12px; overflow:hidden }
.vote-media .tint{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(16,36,63,.4), rgba(16,36,63,.15)) }
.vote-body{ margin:0 16px 10px; font-size:14px; color:#0f172a }
.vote-link{ display:inline-block; margin:0 16px 16px; color:#1B4F82; font-weight:800; text-decoration:none }
.vote-link:hover{ text-decoration:underline }

/* Footer */
.footer{ background:#0E2742; color:#fff }
.footer-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; padding:48px 16px }
.footer-logo{ height:32px; width:auto; margin-bottom:8px }
.foot-h{ font-weight:700; margin:0 0 10px }
.foot-list{ list-style:none; padding:0; margin:0 }
.foot-list li{ margin:0 0 6px }
.foot-list a{ color:#fff; text-decoration:none }
.foot-list a:hover{ text-decoration:underline }
.foot-note{ font-size:12px; opacity:.8 }
.copyright{ font-size:12px; opacity:.7 }

/* ===== IMPORTANT: remove any older conflicting rules =====
   - No Tailwind includes.
   - No .site-header::after shine.
   - No .hero border-radius or LR gradients.
   - No alternate absolute coords for .portrait/.vote.
*/