@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400&display=swap');
:root {
  --navy:    #000038;
  --magenta: #9B1F54;
  --orange:  #E55318;
  --white:   #ffffff;
  --cream:   #F7F5F1;
  --silk:    #F0EDE8;
  --ink:     #0C0C28;
  --slate:   #5A5A72;
  --rule:    #E0DDD8;
  --pad:     clamp(24px,5.5vw,92px);
  --max:     1240px;
  --ease:    cubic-bezier(0.22,1,0.36,1);
}
*{ box-sizing:border-box; margin:0; padding:0;   font-family: 'Poppins', sans-serif;}
html { scroll-behavior:smooth; }
body {
    font-family: 'Poppins', sans-serif !important;

  background:var(--white);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img { display:block; max-width:100%; height:auto; }
::selection { background:var(--magenta); color:#fff; }
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-thumb { background:var(--magenta); }
#sp { position:fixed; top:0; left:0; width:3px; height:0%; background:var(--magenta); z-index:9999; }

/* ═══ HERO ═══════════════════════════════════════════════════ */
.hero {
  position:relative; 
  /*min-height:100vh;*/
  display:grid; 
  grid-template-rows: 1fr auto;
  overflow:hidden; background:var(--navy);
}
.hero-bg {
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at 80% 20%, rgba(155,31,84,0.16) 0%, transparent 55%),
    linear-gradient(155deg, #000028 0%, #04012e 50%, #0a0318 100%);
}
.hero-brand-bar {
  position:absolute; top:0; left:0; right:0;
  height:4px; background:var(--magenta); z-index:10;
  transform:scaleX(0); transform-origin:left;
  animation:brandBar .9s var(--ease) forwards;
}
.hero-inner {
  position:relative; z-index:2;
  padding:clamp(100px,14vw,160px) var(--pad) ;
  max-width:calc(var(--max) + var(--pad)*2);
  width:100%; margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:clamp(32px,4vw,72px);
}
.hero-label {
  background-color: #9B1F54;  
  padding: 10px;
  font-size:10px; 
  max-width: 35%;
  font-weight:600; 
  letter-spacing:3.5px;
  text-transform:uppercase; 
  color:rgba(255,255,255,0.8);
  display:flex; align-items:center; 
  gap:12px;
  margin-bottom:28px;
  opacity:0; animation:rise .5s .15s var(--ease) forwards;
}
.hero-label::before { 
    content:''; 
    width:24px; 
    height:1px; 
    background:var(--magenta); 
    flex-shrink:0; 
    
}
.hero-h1 {
  font-size:clamp(44px,7.5vw,70px);
  font-weight:800; line-height:1;
  letter-spacing:-0.03em; color:var(--white);
  margin-bottom:28px;
  opacity:0; animation:rise .9s .3s var(--ease) forwards;
}
.hero-h1 em {
  font-style:normal; font-weight:300;
  color:rgba(255,255,255,0.32);
  display:block; font-size:0.72em;
  letter-spacing:-0.01em; line-height:1.2;
}
.hero-sub {
  font-size:clamp(14px,1.6vw,17px);
  font-weight:300; line-height:1.75;
  color:rgba(255,255,255,0.48); max-width:460px;
  opacity:0; animation:rise .7s .5s var(--ease) forwards;
}
.hero-count {
  opacity:0; animation:rise .8s .55s var(--ease) forwards;
  text-align:right;
}
.hero-count-n {
  font-size:clamp(80px,12vw,180px);
  font-weight:800; line-height:.85; letter-spacing:-0.04em;
  color:transparent;
  -webkit-text-stroke:1px rgba(155,31,84,0.28);
  user-select:none;
}
.hero-count-l {
  font-size:10px; font-weight:600; letter-spacing:3px;
  text-transform:uppercase; color:rgba(255,255,255,0.18);
}
.hero-stats {
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,0.06);
  opacity:0; animation:rise .6s .85s var(--ease) forwards;
}
.hstat {
  padding:clamp(16px,2.2vw,22px) clamp(12px,2vw,24px);
  border-right:1px solid rgba(255,255,255,0.06);
  text-align:center; transition:background .2s;
}
.hstat:last-child { border-right:none; }
.hstat:hover { background:rgba(155,31,84,0.1); }
.hstat-val { font-size:clamp(18px,2.4vw,28px); font-weight:700; color:var(--white); letter-spacing:-0.5px; line-height:1; }
.hstat-sfx { font-size:.5em; color:var(--orange); font-weight:700; }
.hstat-lbl { font-size:8px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.7); margin-top:4px; }

@keyframes rise { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes brandBar { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes statPop { 0%{transform:scale(0.75);opacity:0} 65%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1} }
.hstat-val.popped { animation:statPop .45s var(--ease) forwards; }

/* ═══ SECTION DIVIDER ════════════════════════════════════════ */
.sdiv {
  padding:clamp(40px,5vw,60px) var(--pad);
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--rule);
}
.sdiv-label {
  font-size:10px; font-weight:700; letter-spacing:4px;
  text-transform:uppercase; color:var(--magenta);
  display:flex; align-items:center; gap:12px;
}
.sdiv-label::before { content:''; width:20px; height:2px; background:var(--magenta); flex-shrink:0; }
.sdiv-title {
  font-size:clamp(22px,3.2vw,36px);
  font-weight:600; color:var(--navy); letter-spacing:-0.025em;
}
.sdiv-dark { background:var(--navy); border-color:rgba(255,255,255,0.05); }
.sdiv-dark .sdiv-title { color:var(--white); }

/* ═══ PERSON SPREAD ══════════════════════════════════════════
   Full-width section per person.
   No half-page photos — small portrait card (180×220px)
   sits in the top-left of the content area.
   Quote + bio flow naturally next to and below it.
   Clean, editorial, photo-size-agnostic.
═══════════════════════════════════════════════════════════════ */

/* LIGHT spread */
.person-spread {
  background:var(--white);
  border-bottom:1px solid var(--rule);
  padding:clamp(56px,7vw,88px) var(--pad);
}
.person-spread-dark {
  background:var(--navy);
  border-bottom:1px solid rgba(255,255,255,0.05);
  padding:clamp(56px,7vw,88px) var(--pad);
}

/* Inner max-width wrapper */
.ps-inner {
  max-width:var(--max); margin:0 auto;
}

/* Top row: small photo left + name/title/tags right */
.ps-header {
  display:grid;
  grid-template-columns:180px 1fr;
  gap:clamp(28px,3.5vw,48px);
  align-items:start;
  margin-bottom:clamp(36px,4.5vw,52px);
  padding-bottom:clamp(32px,4vw,44px);
  border-bottom:1px solid var(--rule);
}
.person-spread-dark .ps-header { border-bottom-color:rgba(255,255,255,0.06); }

/* Portrait — small, constrained, sharp even at low res */
.ps-portrait {
  width:180px;
  flex-shrink:0;
  position:relative;
}
.ps-portrait-frame {
  width:180px; height:220px;
  overflow:hidden;
  background:var(--silk);
  position:relative;
}
.ps-portrait-frame::after {
  content:'';
  position:absolute; bottom:0; left:0; right:0;
  height:3px; background:var(--magenta); z-index:2;
}
.ps-portrait-frame img {
  width:100%; height:100%;
  object-fit:cover; object-position:center top;
  display:block;
}
.ps-portrait-ph {
  width:100%; height:100%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(160deg, var(--silk) 0%, #e8e4e0 100%);
}
.ps-portrait-ph svg { opacity:0.18; }
.ps-portrait-ph-initials {
  font-size:28px; font-weight:800;
  color:var(--navy); opacity:0.15;
  letter-spacing:-1px; line-height:1;
}

/* Dark variant portrait */
.person-spread-dark .ps-portrait-frame { background:rgba(255,255,255,0.04); }
.person-spread-dark .ps-portrait-ph {
  background:linear-gradient(160deg, rgba(155,31,84,0.08) 0%, rgba(0,0,56,0.3) 100%);
}
.person-spread-dark .ps-portrait-ph-initials { color:rgba(155,31,84,0.5); opacity:1; }

.ps-portrait-index {
  position:absolute; top:-10px; right:-10px;
  width:32px; height:32px;
  background:var(--magenta);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800;
  color:var(--white); letter-spacing:0;
  z-index:3;
}

/* Header right: name block */
.ps-nameblock {
  display:flex; flex-direction:column; justify-content:flex-start;
  padding-top:4px;
}
.ps-kicker {
  font-size:9px; font-weight:700; letter-spacing:4px;
  text-transform:uppercase; color:var(--magenta);
  display:flex; align-items:center; gap:10px;
  margin-bottom:14px;
}
.ps-kicker::before { content:''; width:16px; height:2px; background:var(--magenta); flex-shrink:0; }
.ps-name {
  font-size:clamp(24px,3.5vw,42px);
  font-weight:800; color:var(--navy);
  letter-spacing:-0.03em; line-height:.95;
  margin-bottom:8px;
}
.person-spread-dark .ps-name { color:var(--white); }
.ps-title {
  font-size:12px; font-weight:400; color:var(--slate);
  letter-spacing:0.2px; margin-bottom:20px;
  line-height:1.5;
}
.person-spread-dark .ps-title { color:rgba(255,255,255,0.38); }
.ps-tags { display:flex; flex-wrap:wrap; gap:5px; }
.ps-tag {
  font-size:8px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; color:var(--slate);
  padding:3px 9px; border:1px solid rgba(90,90,114,0.2);
}
.person-spread-dark .ps-tag { color:rgba(255,255,255,0.28); border-color:rgba(255,255,255,0.1); }

/* Bottom: two-column — bio left (leads), quote right (supports) */
.ps-body {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(36px,5vw,72px);
  align-items:start;
}
.ps-body { direction:ltr; }
.ps-message {
  font-size:clamp(15px,1.85vw,20px);
  font-weight:300; line-height:1.65; color:var(--ink);
  font-style:italic;
  border-left:3px solid var(--magenta);
  padding-left:clamp(18px,2.5vw,28px);
  position:relative;
}
.ps-message::before {
  content:'\201C';
  display:block; font-size:2.4em; line-height:0.5;
  color:var(--magenta); opacity:0.35;
  font-style:normal; font-family:Georgia,serif;
  margin-bottom:10px;
}
.person-spread-dark .ps-message { color:rgba(255,255,255,0.7); }

.ps-bio {
  font-size:clamp(12px,1.35vw,13px);
  font-weight:400; line-height:1.9; color:var(--slate);
  margin-bottom:22px;
}
.person-spread-dark .ps-bio { color:rgba(255,255,255,0.4); }
.ps-li {
  display:inline-flex; align-items:center; gap:8px;
  font-size:9px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; 
  color:var(--magenta);
  text-decoration:none;
  border:1px solid rgba(155,31,84,0.35);
  padding:9px 18px;
  background:transparent;
  transition:background .22s var(--ease), color .22s, border-color .22s, transform .18s;
  position:relative; overflow:hidden;
}
.ps-li::before {
  content:'';
  position:absolute; inset:0;
  background:var(--magenta);
  transform:translateX(-101%);
  transition:transform .28s var(--ease);
  z-index:0;
}
.ps-li:hover::before {
  color:var(--white) !important; 
  transform:translateX(0); 
}
.ps-li a:hover{
  color:var(--white) !important;
}
.ps-li:hover {  
border-color:var(--magenta); transform:translateY(-2px); }
.ps-li svg, .ps-li span { position:relative; z-index:1; }
.person-spread-dark .ps-li { border-color:rgba(155,31,84,0.4); }
.person-spread-dark .ps-li:hover { color:var(--white); }

/* President CTA */
.ps-cta {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--orange); color:var(--white);
  padding:11px 24px; font-size:13px; font-weight:600;
  text-decoration:none; margin-top:16px;
  transition:background .2s, transform .15s;
}
.ps-cta:hover { color: var(--white); background:#c84a12; transform:translateY(-2px); }
.ps-cta svg { transition:transform .2s var(--ease); }
.ps-cta:hover svg { transform:translateX(4px); }

/* ═══ CLOSING — full-bleed magenta statement ═════════════════ */
.closing {
  background:var(--magenta);
  padding:clamp(72px,9vw,108px) var(--pad);
  position:relative; overflow:hidden;
}
.closing::before {
  content:'""';
  position:absolute;
  right:-0.05em; top:-0.15em;
  font-size:clamp(200px,30vw,400px);
  font-family: 'Poppins', sans-serif;
  font-weight:700; line-height:1;
  color:rgba(0,0,0,0.08);
  pointer-events:none; user-select:none;
}
.closing-inner {
  max-width:var(--max); margin:0 auto;
  position:relative; z-index:1;
}
.cl-eyebrow {
  font-size:9px; font-weight:700; letter-spacing:4px;
  text-transform:uppercase; color:rgba(255,255,255,0.55);
  display:flex; align-items:center; gap:12px;
  margin-bottom:28px;
}
.cl-eyebrow::before {
  content:''; width:20px; height:1px;
  background:rgba(255,255,255,0.5); flex-shrink:0;
}
.cl-quote {
  font-size:clamp(28px,4.5vw,60px);
  font-weight:800; color:var(--white);
  line-height:1.05; letter-spacing:-0.03em;
  margin-bottom:40px; max-width:900px;
}
.cl-quote em {
  font-style:normal;
  color:rgba(255,255,255,0.5);
  font-weight:300;
}
.cl-attr {
  display:flex; align-items:center; gap:14px;
  padding-top:32px;
  border-top:1px solid rgba(255,255,255,0.2);
}
.cl-dot { width:8px; height:8px; border-radius:50%; background:var(--white); flex-shrink:0; }
.cl-name { font-size:13px; font-weight:700; color:var(--white); white-space:nowrap; }
.cl-div { width:1px; height:16px; background:rgba(255,255,255,0.35); flex-shrink:0; }
.cl-role { font-size:9px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.55); }

/* ═══ CTA ════════════════════════════════════════════════════ */
.cta-section {
  background:var(--white); border-top:1px solid var(--rule);
  padding:clamp(56px,7vw,88px) var(--pad);
}
.cta-wrap {
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:1fr auto;
  gap:clamp(36px,5.5vw,80px); align-items:center;
}
.cta-lbl { font-size:10px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--magenta); margin-bottom:10px; }
.cta-h { font-size:clamp(20px,2.8vw,32px); font-weight:300; color:var(--navy); letter-spacing:-0.01em; line-height:1.35; margin-bottom:8px; }
.cta-sub { font-size:14px; color:var(--slate); line-height:1.7; }
.cta-btn {
  display:inline-flex; 
  align-items:center; gap:8px;
  background:var(--orange); 
  color:var(--white);
  padding:14px 30px; 
  font-family:'Poppins',sans-serif;
  font-size:13px; font-weight:600; text-decoration:none;
  white-space:nowrap; transition:background .2s, transform .15s;
}
.cta-btn:hover { background:#c84a12; transform:translateY(-2px); }
.cta-btn svg { transition:transform .2s var(--ease); }
.cta-btn:hover svg { transform:translateX(4px); }

/* ═══ REVEAL ══════════════════════════════════════════════════ */
[data-reveal] { opacity:0; transform:translateY(20px); transition:opacity .75s ease, transform .75s ease; }
[data-reveal].in { opacity:1; transform:translateY(0); }
[data-reveal-l] { opacity:0; transform:translateX(-24px); transition:opacity .75s ease, transform .75s ease; }
[data-reveal-l].in { opacity:1; transform:translateX(0); }
[data-reveal-r] { opacity:0; transform:translateX(24px); transition:opacity .75s ease, transform .75s ease; }
[data-reveal-r].in { opacity:1; transform:translateX(0); }

/* ═══ RESPONSIVE ═══════════════════════════════════════════════ */
@media(max-width:900px) {
  .hero-inner { grid-template-columns:1fr; }
  .hero-count { display:none; }
  .ps-body { grid-template-columns:1fr; gap:28px; }
  .sdiv { flex-direction:column; gap:8px; align-items:flex-start; }
}
@media(max-width:640px) {
    .hero-label{
        font-size: 8px;
        max-width: 85%;
    }
  .hero-stats { grid-template-columns:1fr 1fr; }
  .hstat:nth-child(2) { border-right:none; }
  .hstat:nth-child(3),.hstat:nth-child(4) { border-top:1px solid rgba(255,255,255,0.06); }
  .ps-header { grid-template-columns:120px 1fr; gap:20px; }
  .ps-portrait, .ps-portrait-frame { width:120px; height:148px; }
  .cta-wrap { grid-template-columns:1fr; gap:24px; }
}