:root{
  /* =========================================
     NDC CAMPAIGN BRAND COLORS
     ========================================= */

  --green:#2D2B7E;          /* NDC Primary Blue */
  --green-2:#211F61;        /* NDC Deep Blue */

  --gold:#EF2525;           /* NDC Red */
  --gold-light:#FF5A5A;     /* Light Red */

  --ink:#15152B;            /* Dark text */
  --muted:#68687A;          /* Muted text */

  --cream:#F5F5FA;          /* Very light blue/grey */
  --white:#FFFFFF;

  --line:rgba(45,43,126,.12);

  /* Extra brand colors */
  --blue-light:#5755A8;
  --blue-soft:#EDEDF8;
  --red-dark:#C91818;
  --red-soft:#FFF0F0;
}


/* =========================================
   GLOBAL
   ========================================= */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:90px;
}

body{
  margin:0;
  font-family:"Inter", sans-serif;
  color:var(--ink);
  background:#fff;
  overflow-x:hidden;
}

h1,
h2,
h3{
  font-family:"Playfair Display", serif;
}

a{
  text-decoration:none;
}

img{
  max-width:100%;
}

::selection{
  background:var(--gold);
  color:#fff;
}


/* =========================================
   TOP BAR
   ========================================= */

.topbar{
  background:var(--green-2);
  color:#f0f0fa;
  font-size:.76rem;
  letter-spacing:.04em;
  padding:.48rem 0;
}


/* =========================================
   NAVIGATION
   ========================================= */

.campaign-nav{
  top:28px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 1px 0 rgba(33,31,97,.08);
  transition:.25s ease;
  z-index:1000;
}

.campaign-nav.scrolled{
  top:0;
  box-shadow:0 10px 30px rgba(33,31,97,.13);
}

.navbar-brand img{
  width:210px;
  max-height:58px;
  object-fit:contain;
}

.nav-link{
  font-size:.88rem;
  font-weight:600;
  color:#20203A!important;
  margin:0 .35rem;
  transition:.25s ease;
}

.nav-link:hover{
  color:var(--green)!important;
}

.navbar-toggler{
  border-color:rgba(45,43,126,.25);
}

.navbar-toggler:focus{
  box-shadow:0 0 0 .2rem rgba(45,43,126,.12);
}


/* =========================================
   BUTTONS
   ========================================= */

.btn-gold{
  background:var(--gold);
  border:1px solid var(--gold);
  color:#fff;
  font-weight:700;
  border-radius:999px;
  padding:.72rem 1.35rem;
  transition:.25s ease;
}

.btn-gold:hover{
  background:var(--red-dark);
  border-color:var(--red-dark);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(239,37,37,.25);
}

.btn-outline-light{
  border-width:1px;
}

.btn-dark{
  background:var(--green-2);
  border-color:var(--green-2);
}

.btn-dark:hover{
  background:var(--green);
  border-color:var(--green);
}


/* =========================================
   HERO
   ========================================= */

.hero{
  min-height:100vh;
  padding:150px 0 80px;
  position:relative;
  display:flex;
  align-items:center;

  background:
    linear-gradient(
      115deg,
      #211F61 0%,
      #2D2B7E 55%,
      #19174F 100%
    );

  overflow:hidden;
  color:#fff;
}

.hero:before{
  content:"";
  position:absolute;
  width:650px;
  height:650px;
  border-radius:50%;
  right:-250px;
  top:-250px;
  background:rgba(239,37,37,.12);
  filter:blur(10px);
}

.hero:after{
  content:"";
  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(239,37,37,.22),
      transparent 28%
    ),

    linear-gradient(
      90deg,
      transparent 45%,
      rgba(255,255,255,.035) 45.2%,
      transparent 45.4%
    );

  pointer-events:none;
}

.hero-overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      120deg,
      rgba(33,31,97,.94),
      rgba(45,43,126,.45)
    );

  z-index:0;
}

.hero .container{
  z-index:1;
}


/* =========================================
   HERO TEXT
   ========================================= */

.eyebrow,
.section-kicker{
  display:inline-block;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1rem;
}

.section-kicker.light{
  color:#ff6b6b;
}

.hero h1{
  font-size:clamp(3.2rem,6vw,6.2rem);
  line-height:.98;
  margin:0 0 1.4rem;
  letter-spacing:-.04em;
}

.hero h1 span{
  color:#ff6262;
}

.hero-lead{
  font-size:1.1rem;
  line-height:1.8;
  max-width:620px;
  color:#edf0ff;
}


/* =========================================
   HERO META
   ========================================= */

.hero-meta{
  display:flex;
  gap:2.2rem;
  margin-top:2.7rem;
  padding-top:1.3rem;
  border-top:1px solid rgba(255,255,255,.2);
  max-width:590px;
}

.hero-meta div{
  display:flex;
  flex-direction:column;
  gap:.2rem;
}

.hero-meta strong{
  font-size:.62rem;
  letter-spacing:.14em;
  color:#ff6b6b;
}

.hero-meta span{
  font-size:.82rem;
}


/* =========================================
   CANDIDATE IMAGE
   ========================================= */

.candidate-frame{
  position:relative;
  display:inline-block;
  max-width:560px;
  width:100%;
}

.candidate-image{
  position:relative;
  width:100%;
  max-height:670px;
  object-fit:contain;
  object-position:center bottom;
  filter:
    drop-shadow(0 30px 35px rgba(0,0,0,.3));
  z-index:2;
}

.candidate-glow{
  position:absolute;
  width:80%;
  height:70%;
  right:8%;
  bottom:3%;
  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(239,37,37,.24),
      rgba(239,37,37,.05) 55%,
      transparent 75%
    );

  filter:blur(35px);
}

.candidate-badge{
  position:absolute;
  right:5%;
  bottom:10%;

  background:#fff;
  color:var(--green);

  padding:1rem 1.2rem;
  border-radius:18px;

  box-shadow:
    0 15px 35px rgba(0,0,0,.22);

  display:flex;
  flex-direction:column;
  line-height:1;
  z-index:3;
}

.candidate-badge small{
  font-size:.55rem;
  letter-spacing:.14em;
  font-weight:800;
  margin-bottom:.3rem;
}

.candidate-badge strong{
  font-size:2rem;
  font-family:"Playfair Display",serif;
  color:var(--gold);
}


/* =========================================
   INTRO STRIP
   ========================================= */

.intro-strip{
  background:var(--gold);
  color:#fff;
  padding:2.2rem 0;
}

.intro-strip h2{
  font-size:clamp(1.6rem,3vw,2.45rem);
  margin:0;
  color:#fff;
}

.intro-strip p{
  font-weight:600;
  line-height:1.7;
  color:#fff;
}


/* =========================================
   GENERAL SECTION
   ========================================= */

.section-pad{
  padding:6.5rem 0;
}

.display-title{
  font-size:clamp(2.4rem,4vw,4.2rem);
  line-height:1.05;
  letter-spacing:-.03em;
  margin-bottom:1.2rem;
  color:var(--green-2);
}

.lead-copy{
  color:#535568;
  line-height:1.85;
  font-size:1.02rem;
  max-width:700px;
}


/* =========================================
   ABOUT / PORTRAIT
   ========================================= */

.portrait-card{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  background:var(--cream);

  box-shadow:
    0 25px 60px rgba(33,31,97,.12);
}

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

.portrait-caption{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;

  background:rgba(33,31,97,.94);
  color:#fff;

  border-radius:18px;
  padding:1rem 1.15rem;

  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:1rem;
}

.portrait-caption span{
  font-size:.62rem;
  letter-spacing:.12em;
  color:#ff6868;
  font-weight:800;
}

.portrait-caption strong{
  font-family:"Playfair Display",serif;
  font-size:1.15rem;
}


/* =========================================
   PRINCIPLES
   ========================================= */

.principle{
  height:100%;
  border:1px solid var(--line);
  padding:1.1rem;
  border-radius:17px;

  display:flex;
  gap:.7rem;
  align-items:center;

  background:#fff;

  transition:.25s ease;
}

.principle:hover{
  border-color:rgba(239,37,37,.25);
  transform:translateY(-3px);
  box-shadow:0 10px 25px rgba(33,31,97,.08);
}

.principle i{
  color:var(--green);
  font-size:1.3rem;
}

.principle span{
  font-size:.8rem;
  font-weight:700;
}


/* =========================================
   VISION / POLICY SECTION
   ========================================= */

.vision-section{
  background:var(--green-2);
  color:#fff;
  position:relative;
  overflow:hidden;
}

.vision-section:before{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(239,37,37,.16),
      transparent 70%
    );

  right:-180px;
  top:-180px;
}

.vision-section:after{
  content:"";
  position:absolute;
  width:400px;
  height:400px;
  border-radius:50%;

  background:rgba(45,43,126,.35);

  left:-250px;
  bottom:-250px;
}

.section-heading{
  max-width:780px;
  margin:auto;
  position:relative;
  z-index:1;
}

.section-heading h2{
  font-size:clamp(2.5rem,4vw,4.1rem);
  line-height:1.05;
  margin-bottom:1rem;
}

.section-heading p{
  color:#72758A;
  line-height:1.7;
}

.vision-section .section-heading p{
  color:#c6c9df;
}


/* =========================================
   POLICY CARDS
   ========================================= */

.policy-card{
  position:relative;
  height:100%;

  padding:2rem;

  border:1px solid rgba(255,255,255,.1);
  border-radius:22px;

  background:rgba(255,255,255,.035);

  transition:.3s ease;
  overflow:hidden;
}

.policy-card:hover{
  transform:translateY(-7px);

  border-color:rgba(239,37,37,.6);

  background:rgba(255,255,255,.06);

  box-shadow:
    0 20px 45px rgba(0,0,0,.18);
}

.policy-card i{
  font-size:1.7rem;
  color:var(--gold);

  display:block;
  margin:1.2rem 0;
}

.policy-card h3{
  font-size:1.55rem;
  margin-bottom:.65rem;
}

.policy-card p{
  color:#b8bbcb;
  line-height:1.7;
  margin:0;
}

.policy-number{
  position:absolute;
  right:1.3rem;
  top:1rem;

  color:rgba(255,255,255,.16);

  font-size:2.4rem;
  font-weight:800;
}


/* =========================================
   HIGHLIGHTED POLICY CARD
   ========================================= */

.policy-highlight{
  background:var(--gold);
  color:#fff;
  border-color:var(--gold);
}

.policy-highlight:hover{
  background:var(--red-dark);
  border-color:var(--red-dark);
}

.policy-highlight i,
.policy-highlight .policy-number{
  color:rgba(255,255,255,.55);
}

.policy-highlight p{
  color:#fff;
}


/* =========================================
   MOVEMENT SECTION
   ========================================= */

.movement-section{
  background:var(--cream);
}

.movement-card{
  min-height:310px;

  border-radius:28px;

  background:
    linear-gradient(
      135deg,
      var(--green-2),
      var(--green)
    );

  color:#fff;

  padding:2.5rem;

  display:flex;
  flex-direction:column;
  justify-content:center;

  box-shadow:
    0 25px 55px rgba(33,31,97,.18);

  position:relative;
  overflow:hidden;
}

.movement-card:after{
  content:"";
  position:absolute;

  width:250px;
  height:250px;

  border-radius:50%;

  background:rgba(239,37,37,.12);

  right:-100px;
  bottom:-100px;
}

.big-word{
  font-family:"Playfair Display",serif;

  font-size:clamp(4rem,8vw,7rem);

  line-height:.8;

  color:var(--gold);

  position:relative;
  z-index:1;
}

.movement-card p{
  margin:1.2rem 0;

  color:#cbd0e0;
  font-weight:600;

  position:relative;
  z-index:1;
}

.movement-card .line{
  width:80px;
  height:3px;

  background:var(--gold);

  margin-bottom:1rem;

  position:relative;
  z-index:1;
}

.movement-card strong{
  position:relative;
  z-index:1;
}


/* =========================================
   MEDIA SECTION
   ========================================= */

.media-section{
  padding:5rem 0;
  background:#fff;
}

.media-banner{
  border-radius:25px;
  overflow:hidden;

  box-shadow:
    0 25px 55px rgba(33,31,97,.12);
}

.media-banner img{
  width:100%;
  display:block;

  max-height:430px;

  object-fit:cover;
}


/* =========================================
   GALLERY
   ========================================= */

.gallery-section{
  background:#f8f8fb;
}

.gallery-item{
  aspect-ratio:1/1;

  overflow:hidden;

  border-radius:18px;

  background:#ddd;

  box-shadow:
    0 8px 25px rgba(33,31,97,.07);
}

.gallery-item img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:.55s ease;
}

.gallery-item:hover img{
  transform:scale(1.07);
}

/* =========================================================
   MODERN MERGED CAMPAIGN GALLERY
   ========================================================= */

.gallery-section{
  background:#f5f5fa;
  padding:0;
  overflow:hidden;
}


/* =========================================================
   GALLERY HEADING
   ========================================================= */

.gallery-heading{
  padding:6rem 0 3.5rem;
  text-align:center;
  background:#fff;
}

.gallery-heading .section-kicker{
  color:#EF2525;
  margin-bottom:.8rem;
}

.gallery-heading h2{
  margin:0 0 1rem;
  color:#211F61;
  font-size:clamp(2.7rem,5vw,4.8rem);
  line-height:1;
  letter-spacing:-.04em;
}

.gallery-heading p{
  margin:0 auto;
  color:#68687A;
  font-size:1rem;
  line-height:1.7;
}


/* =========================================================
   MERGED GRID
   ========================================================= */

.merged-gallery{
  width:100%;
  display:grid;

  /*
     4-column editorial layout
  */
  grid-template-columns:
    repeat(4,1fr);

  /*
     No gaps = merged photo appearance
  */
  gap:0;

  background:#11103B;
}


/* =========================================================
   INDIVIDUAL IMAGE
   ========================================================= */

.merged-item{
  position:relative;
  display:block;

  height:360px;

  overflow:hidden;

  background:#211F61;

  text-decoration:none;

  isolation:isolate;
}


/* Image */

.merged-item img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  transition:
    transform .8s cubic-bezier(.2,.7,.2,1),
    filter .5s ease;
}


/* =========================================================
   EDITORIAL SIZING
   ========================================================= */

/*
   Feature image
*/

.item-1{
  grid-column:span 2;
  grid-row:span 2;
  height:720px;
}


/*
   Tall image
*/

.item-2{
  grid-row:span 2;
  height:720px;
}


/*
   Normal
*/

.item-3{
  height:360px;
}

.item-4{
  height:360px;
}


/*
   Wide feature
*/

.item-5{
  grid-column:span 2;
  height:360px;
}


/*
   Large
*/

.item-7{
  grid-column:span 2;
  grid-row:span 2;
  height:720px;
}


/*
   Tall
*/

.item-9{
  grid-row:span 2;
  height:720px;
}


/*
   Feature ending
*/

.item-12{
  grid-column:span 2;
  height:360px;
}


/* =========================================================
   IMAGE TREATMENT
   ========================================================= */

.merged-item img{
  filter:saturate(.92);
}


/*
   Subtle darkening makes text readable
*/

.merged-item:after{
  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      to top,
      rgba(17,16,59,.78) 0%,
      rgba(17,16,59,.12) 45%,
      transparent 70%
    );

  opacity:0;

  transition:.45s ease;

  z-index:1;

  pointer-events:none;
}


/* =========================================================
   GALLERY TEXT
   ========================================================= */

.gallery-overlay{
  position:absolute;

  left:0;
  right:0;
  bottom:0;

  padding:2rem;

  display:flex;
  flex-direction:column;

  align-items:flex-start;

  color:#fff;

  transform:translateY(18px);

  opacity:0;

  transition:
    opacity .4s ease,
    transform .5s ease;

  z-index:2;
}

.gallery-overlay span{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  width:34px;
  height:34px;

  margin-bottom:.6rem;

  border:1px solid rgba(255,255,255,.55);

  border-radius:50%;

  font-size:.62rem;

  font-weight:800;

  letter-spacing:.05em;
}

.gallery-overlay strong{
  font-family:"Playfair Display",serif;

  font-size:1.35rem;

  font-weight:600;

  line-height:1.2;
}


/* =========================================================
   HOVER
   ========================================================= */

.merged-item:hover img{
  transform:scale(1.07);

  filter:
    saturate(1.08)
    contrast(1.03);
}

.merged-item:hover:after{
  opacity:1;
}

.merged-item:hover .gallery-overlay{
  opacity:1;
  transform:translateY(0);
}


/* =========================================================
   ACTIVE / FOCUS
   ========================================================= */

.merged-item:focus-visible{
  outline:4px solid #EF2525;
  outline-offset:-4px;
  z-index:5;
}


/* =========================================================
   RED ACCENT LINE
   ========================================================= */

.merged-item:before{
  content:"";

  position:absolute;

  left:0;
  bottom:0;

  width:0;
  height:4px;

  background:#EF2525;

  transition:width .5s ease;

  z-index:4;
}

.merged-item:hover:before{
  width:100%;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:991.98px){

  .gallery-heading{
    padding:5rem 0 3rem;
  }

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

  .merged-item,
  .item-3,
  .item-4,
  .item-5,
  .item-6,
  .item-8,
  .item-10,
  .item-11{
    height:330px;
  }

  .item-1,
  .item-7{
    grid-column:span 2;
    grid-row:span 2;
    height:660px;
  }

  .item-2,
  .item-9{
    grid-row:span 2;
    height:660px;
  }

  .item-12{
    grid-column:span 2;
    height:330px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:575.98px){

  .gallery-heading{
    padding:4.5rem 1.2rem 2.5rem;
  }

  .gallery-heading h2{
    font-size:2.8rem;
  }

  .gallery-heading p{
    font-size:.92rem;
  }

  /*
     2-column mobile collage
  */

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

  /*
     Reset everything
  */

  .merged-item,
  .item-1,
  .item-2,
  .item-3,
  .item-4,
  .item-5,
  .item-6,
  .item-7,
  .item-8,
  .item-9,
  .item-10,
  .item-11,
  .item-12{
    height:240px;
    grid-column:span 1;
    grid-row:span 1;
  }

  /*
     Mobile feature images
  */

  .item-1,
  .item-7{
    grid-column:span 2;
    height:360px;
  }

  .item-5,
  .item-12{
    grid-column:span 2;
    height:270px;
  }

  /*
     Always show a small amount of
     information on mobile
  */

  .gallery-overlay{
    padding:1rem;

    opacity:1;

    transform:none;
  }

  .gallery-overlay span{
    width:28px;
    height:28px;

    font-size:.55rem;

    margin-bottom:.35rem;
  }

  .gallery-overlay strong{
    font-size:.95rem;
  }

  .merged-item:after{
    opacity:1;
  }

  .merged-item:before{
    display:none;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media(max-width:380px){

  .merged-item,
  .item-2,
  .item-3,
  .item-4,
  .item-6,
  .item-8,
  .item-9,
  .item-10,
  .item-11{
    height:210px;
  }

  .item-1,
  .item-7{
    height:320px;
  }

  .item-5,
  .item-12{
    height:240px;
  }

}

/* =========================================
   ENDORSEMENT
   ========================================= */

.endorsement-section{
  background:#fff;
}

.quote-icon{
  font-size:3rem;
  color:var(--gold);
}

.endorsement-section blockquote{
  font-family:"Playfair Display",serif;

  font-size:clamp(2rem,4vw,3.5rem);

  max-width:850px;

  margin:0 auto 1rem;

  color:var(--green-2);
}



/* =========================================================
   CAMPAIGN GALLERY LIGHTBOX
   ========================================================= */

.gallery-section{background:#f8f8f6;padding:0;overflow:hidden}.gallery-heading{padding:6rem 0 3.5rem;background:#fff;text-align:center}.gallery-heading .section-kicker{color:#EF2525}.gallery-heading h2{margin:0 0 1rem;color:#211F61;font-size:clamp(2.7rem,5vw,4.8rem);line-height:1;letter-spacing:-.04em}.gallery-heading p{margin:0 auto;color:#68687A;line-height:1.7}.merged-gallery{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#11103B}.merged-item{position:relative;display:block;height:360px;overflow:hidden;background:#211F61;text-decoration:none;isolation:isolate}.merged-item img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s ease}.item-1,.item-7{grid-column:span 2;grid-row:span 2;height:720px}.item-2,.item-9{grid-row:span 2;height:720px}.item-5,.item-12{grid-column:span 2;height:360px}.merged-item:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(17,16,59,.82),rgba(17,16,59,.1) 50%,transparent 75%);opacity:0;transition:.45s ease;z-index:1;pointer-events:none}.gallery-overlay{position:absolute;left:0;right:0;bottom:0;padding:2rem;display:flex;flex-direction:column;align-items:flex-start;color:#fff;transform:translateY(18px);opacity:0;transition:opacity .4s ease,transform .5s ease;z-index:2}.gallery-overlay span{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-bottom:.6rem;border:1px solid rgba(255,255,255,.55);border-radius:50%;font-size:.62rem;font-weight:800}.gallery-overlay strong{font-family:"Playfair Display",serif;font-size:1.35rem;font-weight:600;line-height:1.2}.merged-item:hover img{transform:scale(1.07);filter:saturate(1.08) contrast(1.03)}.merged-item:hover:after,.merged-item:hover .gallery-overlay{opacity:1}.merged-item:hover .gallery-overlay{transform:translateY(0)}.merged-item:before{content:"";position:absolute;left:0;bottom:0;width:0;height:4px;background:#EF2525;transition:width .5s ease;z-index:4}.merged-item:hover:before{width:100%}.gallery-lightbox{position:fixed;inset:0;width:100%;height:100%;background:rgba(10,9,35,.97);display:flex;align-items:center;justify-content:center;padding:30px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s ease;z-index:99999}.gallery-lightbox.active{opacity:1;visibility:visible;pointer-events:auto}.lightbox-content{position:relative;width:min(1100px,88vw);height:min(800px,88vh);display:flex;align-items:center;justify-content:center;transform:scale(.96);transition:transform .35s ease}.gallery-lightbox.active .lightbox-content{transform:scale(1)}#lightboxImage{max-width:100%;max-height:calc(100% - 65px);width:auto;height:auto;object-fit:contain;display:block;border-radius:5px;box-shadow:0 30px 80px rgba(0,0,0,.5);user-select:none;-webkit-user-drag:none;transition:opacity .2s ease,transform .25s ease}#lightboxImage.loading{opacity:.35;transform:scale(.98)}.lightbox-close,.lightbox-prev,.lightbox-next{position:absolute;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;transition:.25s ease}.lightbox-close{top:25px;right:30px;width:48px;height:48px}.lightbox-prev,.lightbox-next{top:50%;width:58px;height:58px;font-size:1.4rem}.lightbox-prev{left:30px;transform:translateY(-50%)}.lightbox-next{right:30px;transform:translateY(-50%)}.lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover{background:#EF2525;border-color:#EF2525}.lightbox-close:hover{transform:rotate(90deg)}.lightbox-caption{position:absolute;left:0;right:0;bottom:0;padding:12px 4px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;color:#fff}.lightbox-caption span{color:#ff6666;font-size:.68rem;font-weight:800;letter-spacing:.12em}.lightbox-caption strong{font-family:"Playfair Display",serif;font-size:1.2rem;font-weight:500}.merged-item:focus-visible{outline:4px solid #EF2525;outline-offset:-4px;z-index:5}@media(max-width:991.98px){.merged-gallery{grid-template-columns:repeat(2,1fr)}.merged-item{height:330px}.item-1,.item-7{height:660px}.item-2,.item-9{height:660px}.item-5,.item-12{height:330px}}@media(max-width:575.98px){.gallery-heading{padding:4.5rem 1.2rem 2.5rem}.merged-gallery{grid-template-columns:repeat(2,1fr)}.merged-item,.item-2,.item-3,.item-4,.item-5,.item-6,.item-8,.item-9,.item-10,.item-11,.item-12{height:240px;grid-column:span 1;grid-row:span 1}.item-1,.item-7{grid-column:span 2;height:360px}.item-5,.item-12{grid-column:span 2;height:270px}.gallery-overlay{padding:1rem;opacity:1;transform:none}.gallery-overlay span{width:28px;height:28px;font-size:.55rem;margin-bottom:.35rem}.gallery-overlay strong{font-size:.95rem}.merged-item:after{opacity:1}.merged-item:before{display:none}.gallery-lightbox{padding:15px}.lightbox-content{width:100%;height:82vh}.lightbox-close{top:15px;right:15px;width:42px;height:42px}.lightbox-prev,.lightbox-next{width:44px;height:44px;font-size:1rem}.lightbox-prev{left:12px}.lightbox-next{right:12px}.lightbox-caption{padding:10px 2px 0}.lightbox-caption strong{font-size:1rem}}
/* =========================================
   GET INVOLVED
   ========================================= */

.involve-section{
  background:
    linear-gradient(
      135deg,
      var(--green-2),
      var(--green)
    );

  color:#fff;

  position:relative;
  overflow:hidden;
}

.involve-section:after{
  content:"";

  position:absolute;

  width:500px;
  height:500px;

  border-radius:50%;

  background:rgba(239,37,37,.1);

  right:-250px;
  bottom:-250px;
}

.involve-section .container{
  position:relative;
  z-index:1;
}

.involve-section h2{
  font-size:clamp(2.8rem,5vw,5rem);
  line-height:1;
}

.involve-section p{
  color:#cbd0df;
  font-size:1.05rem;
}


/* =========================================
   VOLUNTEER FORM
   ========================================= */

.volunteer-form{
  background:#fff;

  padding:1.6rem;

  border-radius:24px;

  box-shadow:
    0 25px 50px rgba(0,0,0,.15);
}

.form-control,
.form-select{
  border-radius:12px;

  padding:.85rem 1rem;

  border-color:#e0e1e8;

  color:var(--ink);
}

.form-control:focus,
.form-select:focus{
  border-color:var(--green);

  box-shadow:
    0 0 0 .2rem rgba(45,43,126,.12);
}

.form-message{
  display:none;

  margin-top:.8rem;

  font-size:.8rem;

  color:var(--green);

  font-weight:700;
}


/* =========================================
   FINAL CAMPAIGN BANNER
   ========================================= */

.final-banner{
  padding:4rem 0;

  background:
    linear-gradient(
      135deg,
      var(--gold),
      var(--red-dark)
    );

  color:#fff;

  position:relative;
  overflow:hidden;
}

.final-banner:after{
  content:"";

  position:absolute;

  width:300px;
  height:300px;

  border-radius:50%;

  background:rgba(255,255,255,.08);

  right:-120px;
  top:-120px;
}

.final-banner .container{
  position:relative;
  z-index:1;
}

.final-banner span{
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.16em;
}

.final-banner h2{
  font-size:clamp(2rem,4vw,3.5rem);
  margin:.8rem 0 0;
}


/* =========================================
   FOOTER
   ========================================= */

footer{
  background:#11103B;
  color:#d7d8e5;
}

footer h5{
  color:#fff;

  font-size:.8rem;

  text-transform:uppercase;

  letter-spacing:.13em;

  margin-bottom:1rem;
}

footer a{
  display:block;

  color:#d7d8e5;

  margin-bottom:.65rem;

  transition:.2s ease;
}

footer a:hover{
  color:#ff6666;
}

.footer-logo{
  width:190px;
  max-height:60px;
  object-fit:contain;
}

.footer-copy{
  color:#9fa1b5;
  max-width:390px;
  line-height:1.7;
}

footer hr{
  border-color:rgba(255,255,255,.1);
  margin:2rem 0;
}


/* =========================================
   BACK TO TOP
   ========================================= */

.back-to-top{
  position:fixed;

  right:20px;
  bottom:20px;

  width:44px;
  height:44px;

  border:0;

  border-radius:50%;

  background:var(--gold);
  color:#fff;

  display:none;

  z-index:20;

  box-shadow:
    0 10px 25px rgba(0,0,0,.2);

  transition:.25s ease;
}

.back-to-top:hover{
  background:var(--red-dark);
  transform:translateY(-3px);
}

.back-to-top.show{
  display:block;
}


/* =========================================
   RESPONSIVE — TABLET
   ========================================= */

@media(max-width:991.98px){

  .topbar{
    display:none;
  }

  .campaign-nav{
    top:0;
  }

  .navbar-brand img{
    width:180px;
  }

  .hero{
    padding-top:115px;
  }

  .candidate-frame{
    max-width:520px;
  }

  .portrait-card img{
    height:480px;
  }

}


/* =========================================
   RESPONSIVE — MOBILE
   ========================================= */

@media(max-width:575.98px){

  .hero{
    padding:110px 0 55px;
  }

  .hero h1{
    font-size:3rem;
  }

  .hero-lead{
    font-size:.98rem;
  }

  .hero-meta{
    gap:1rem;
    flex-wrap:wrap;
  }

  .hero-meta div{
    min-width:43%;
  }

  .section-pad{
    padding:4.7rem 0;
  }

  .portrait-card img{
    height:410px;
  }

  .portrait-caption{
    flex-direction:column;
    align-items:flex-start;
  }

  .candidate-badge{
    right:2%;
    bottom:4%;
    padding:.7rem .9rem;
  }

  .candidate-badge strong{
    font-size:1.55rem;
  }

  .movement-card{
    min-height:280px;
    padding:2rem;
  }

  .big-word{
    font-size:4.5rem;
  }

  .policy-card{
    padding:1.6rem;
  }

  .final-banner{
    padding:3rem 1rem;
  }

}





/* =========================================================
   PREMIUM JAVASCRIPT ANIMATION SYSTEM
   ========================================================= */


/* ---------------------------------------------------------
   PAGE LOAD
--------------------------------------------------------- */

body {
    opacity: 0;
    transition: opacity 0.8s ease;
}

body.page-ready {
    opacity: 1;
}


/* ---------------------------------------------------------
   NAVBAR
--------------------------------------------------------- */

.campaign-nav {
    transition:
        background-color 0.4s ease,
        box-shadow 0.4s ease,
        padding 0.4s ease,
        backdrop-filter 0.4s ease;
}

.campaign-nav.nav-scrolled {
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 10px 35px rgba(0,0,0,0.08);
}


/* ---------------------------------------------------------
   ACTIVE NAV LINK
--------------------------------------------------------- */

.campaign-nav .nav-link {
    position: relative;
    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.campaign-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 0;
    height: 2px;
    transform: translateX(-50%);
    transition: width 0.35s ease;
}

.campaign-nav .nav-link:hover::after,
.campaign-nav .nav-link.active-link::after {
    width: 70%;
}

.campaign-nav .nav-link:hover {
    transform: translateY(-2px);
}


/* ---------------------------------------------------------
   HERO REVEAL
--------------------------------------------------------- */

.hero .hero-reveal {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity 0.9s cubic-bezier(.22,1,.36,1),
        transform 1s cubic-bezier(.22,1,.36,1);
    transition-delay: var(--hero-delay);
}

.hero.hero-loaded .hero-reveal {
    opacity: 1;
    transform: translateY(0);
}


/* Candidate image */

.hero .candidate-frame {
    opacity: 0;
    transform:
        translateY(50px)
        scale(.94);
    transition:
        opacity 1.2s cubic-bezier(.22,1,.36,1),
        transform 1.3s cubic-bezier(.22,1,.36,1);
    transition-delay: 650ms;
}

.hero.hero-loaded .candidate-frame {
    opacity: 1;
    transform:
        translateY(var(--float-y, 0))
        scale(1)
        rotate(var(--float-rotate, 0deg));
}


/* ---------------------------------------------------------
   GENERAL SECTION REVEALS
--------------------------------------------------------- */

.reveal-element {
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity 0.9s cubic-bezier(.22,1,.36,1),
        transform 1s cubic-bezier(.22,1,.36,1);
    transition-delay: var(--reveal-delay, 0ms);
}

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


/* ---------------------------------------------------------
   POLICY CARDS
--------------------------------------------------------- */

.policy-card,
.principle {
    position: relative;
    transform-style: preserve-3d;
    transition:
        transform 0.45s cubic-bezier(.22,1,.36,1),
        box-shadow 0.45s ease;
}

.policy-card::before {
    content: "";
    position: absolute;
    top: var(--mouse-y, 50%);
    left: var(--mouse-x, 50%);
    width: 180px;
    height: 180px;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        circle,
        rgba(255,255,255,.16),
        transparent 65%
    );
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}

.policy-card:hover::before {
    opacity: 1;
}

.policy-card i {
    transition:
        transform .45s cubic-bezier(.22,1,.36,1);
}

.policy-card:hover i {
    transform:
        translateZ(25px)
        scale(1.12)
        rotate(-5deg);
}

.policy-card h3,
.policy-card p {
    transition:
        transform .4s ease;
}

.policy-card:hover h3 {
    transform: translateZ(18px);
}


/* ---------------------------------------------------------
   PRINCIPLE CARDS
--------------------------------------------------------- */

.principle:hover {
    box-shadow:
        0 18px 45px rgba(0,0,0,.10);
}


/* ---------------------------------------------------------
   IMAGE HOVER
--------------------------------------------------------- */

.media-banner,
.border-rounded,
.gallery-item {
    overflow: hidden;
}

.media-banner img,
.border-rounded img,
.gallery-item img {
    transition:
        transform 1s cubic-bezier(.22,1,.36,1),
        filter .7s ease;
    will-change: transform;
}

.gallery-item:hover img {
    transform: scale(1.08);
    filter: brightness(1.04);
}


/* ---------------------------------------------------------
   GALLERY
--------------------------------------------------------- */

.gallery-item {
    position: relative;
    overflow: hidden;
}

.gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.16),
            transparent 45%
        );
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
}

.gallery-item:hover::after {
    opacity: 1;
}


/* ---------------------------------------------------------
   BUTTONS
--------------------------------------------------------- */

.btn-gold,
.btn-outline-light {
    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        box-shadow .35s ease;
    will-change: transform;
}

.btn-gold:hover {
    box-shadow:
        0 15px 35px rgba(0,0,0,.16);
}


/* ---------------------------------------------------------
   MOVEMENT CARD
--------------------------------------------------------- */

.movement-card {
    overflow: hidden;
}

.big-word {
    display: inline-block;
    transition:
        transform .7s cubic-bezier(.22,1,.36,1),
        letter-spacing .7s ease,
        opacity .5s ease;
}

.big-word.word-active {
    transform:
        scale(1.05)
        translateX(10px);
    letter-spacing: .06em;
}


/* ---------------------------------------------------------
   FORM
--------------------------------------------------------- */

.volunteer-form .mb-3 {
    transition:
        transform .3s ease;
}

.volunteer-form .input-focused {
    transform: translateY(-3px);
}

.volunteer-form input,
.volunteer-form select {
    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}

.volunteer-form input:focus,
.volunteer-form select:focus {
    transform: translateY(-1px);
}

.form-message {
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity .5s ease,
        transform .5s ease;
}

.form-message.show {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   PREMIUM LIGHTBOX
   ========================================================= */

.premium-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    background:
        rgba(5, 15, 11, .94);

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .45s ease,
        visibility .45s ease;
}

.premium-lightbox.active {
    opacity: 1;
    visibility: visible;
}


.lightbox-content {
    position: relative;

    max-width: min(1100px, 90vw);
    max-height: 85vh;

    text-align: center;

    transform:
        scale(.88)
        translateY(20px);

    transition:
        transform .55s cubic-bezier(.22,1,.36,1);
}

.premium-lightbox.active .lightbox-content {
    transform:
        scale(1)
        translateY(0);
}


.lightbox-content img {
    display: block;

    max-width: 100%;
    max-height: 78vh;

    object-fit: contain;

    border-radius: 10px;

    box-shadow:
        0 30px 100px rgba(0,0,0,.45);
}


.lightbox-caption {
    color: rgba(255,255,255,.75);
    font-size: 13px;
    margin-top: 14px;
}


.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute;

    width: 48px;
    height: 48px;

    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%;

    background: rgba(255,255,255,.08);
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    transition:
        background .3s ease,
        transform .3s ease,
        border-color .3s ease;
}


.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(255,255,255,.18);
    transform: scale(1.08);
}


.lightbox-close {
    top: 30px;
    right: 30px;
}


.lightbox-prev {
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
}


.lightbox-next {
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
}


.lightbox-prev:hover,
.lightbox-next:hover {
    transform:
        translateY(-50%)
        scale(1.08);
}


.lightbox-counter {
    position: absolute;
    bottom: 25px;
    left: 50%;

    transform: translateX(-50%);

    color: rgba(255,255,255,.65);

    font-size: 12px;
    letter-spacing: .15em;
}


body.lightbox-open {
    overflow: hidden;
}


/* ---------------------------------------------------------
   BACK TO TOP
--------------------------------------------------------- */

.back-to-top {
    opacity: 0;
    visibility: hidden;

    transform:
        translateY(15px)
        scale(.85);

    transition:
        opacity .35s ease,
        visibility .35s ease,
        transform .35s cubic-bezier(.22,1,.36,1);
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
}

/* =========================
   CAMPAIGN AUDIO
========================= */

.campaign-audio-section {
    position: relative;
    background: #f7f9f6;
    overflow: hidden;
}

.campaign-audio-section .section-kicker {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #EF2525;
    margin-bottom: 10px;
}

.campaign-audio-section .section-heading h2 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 12px;
}

.campaign-audio-section .section-heading h2 span {
    color: #2D2B7E;
}

.campaign-audio-section .section-heading p {
    max-width: 650px;
    margin: auto;
    color: #6b726d;
}

/* CARD */

.campaign-audio-card {
    position: relative;
    background: #ffffff;
    padding: 30px;
    border-radius: 22px;
    border: 1px solid rgba(28, 107, 60, 0.10);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.07);
    transition: all .35s ease;
    height: 100%;
}

.campaign-audio-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.11);
}

/* TOP */

.audio-top {
    display: flex;
    align-items: center;
    gap: 17px;
}

.audio-icon {
    width: 58px;
    height: 58px;
    min-width: 58px;
    border-radius: 16px;
    background: #2D2B7E;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    box-shadow: 0 8px 20px rgba(28, 107, 60, .25);
}

.audio-label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
    margin-bottom: 5px;
}

.audio-top h4 {
    margin: 0;
    font-size: 21px;
    font-weight: 800;
    color: #2D2B7E;
}

.audio-description {
    color: #737a75;
    font-size: 14px;
    line-height: 1.7;
    margin: 23px 0;
}

/* HIDE NATIVE AUDIO */

.campaign-player {
    display: none;
}

/* CUSTOM PLAYER */

.custom-audio-player {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* PLAY BUTTON */

.audio-play-btn {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border: none;
    border-radius: 50%;
    background: #2D2B7E;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
}

.audio-play-btn:hover {
    transform: scale(1.08);
}

.audio-play-btn i {
    font-size: 15px;
}

/* PROGRESS */

.audio-progress-wrapper {
    flex: 1;
}

.audio-progress {
    width: 100%;
    height: 6px;
    background: #e6ebe7;
    border-radius: 20px;
    cursor: pointer;
    overflow: hidden;
}

.audio-progress-bar {
    display: block;
    width: 0%;
    height: 100%;
    background: #2D2B7E;
    border-radius: 20px;
    transition: width .1s linear;
}

/* TIME */

.audio-time {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 11px;
    color: #8b918d;
}

/* MOBILE */

@media (max-width: 575px) {

    .campaign-audio-section .section-heading h2 {
        font-size: 32px;
    }

    .campaign-audio-card {
        padding: 23px;
    }

    .audio-icon {
        width: 50px;
        height: 50px;
        min-width: 50px;
    }

    .audio-top h4 {
        font-size: 18px;
    }
}


/* =========================================================
   NEWS & CAMPAIGN UPDATES
========================================================= */

.news-section {
  background: #f6f4ee;
}

.news-card {
  height: 100%;
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(15, 61, 46, 0.08);
  transition: all 0.35s ease;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.05);
}

.news-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.10);
}

.news-image {
  height: 245px;
  position: relative;
  overflow: hidden;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.news-card:hover .news-image img {
  transform: scale(1.06);
}

.news-category {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 7px 13px;
  background: #c9a24d;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 30px;
}

.news-content {
  padding: 27px;
}

.news-date {
  color: #777;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
}

.news-date i {
  margin-right: 5px;
  color: #c9a24d;
}

.news-content h3 {
  color: #0f3d2e;
  font-family: "Playfair Display", serif;
  font-size: 22px;
  line-height: 1.3;
  margin-bottom: 14px;
}

.news-content p {
  color: #666;
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 20px;
}

.news-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0f3d2e;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  transition: all 0.3s ease;
}

.news-link i {
  transition: transform 0.3s ease;
}

.news-link:hover {
  color: #c9a24d;
}

.news-link:hover i {
  transform: translateX(5px);
}

@media (max-width: 767px) {

  .news-image {
    height: 220px;
  }

  .news-content {
    padding: 22px;
  }

  .news-content h3 {
    font-size: 20px;
  }

}