/* -------------------------
       HERO (video)
    --------------------------*/
 .hero {
     position: relative;
     min-height: 118dvh;
     display: grid;
     place-items: center;
     overflow: hidden;
     color: #fff;
     isolation: isolate;
 }

 .hero video {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: -2;
     filter: saturate(1.15) contrast(1.05) brightness(.9);
 }

 .hero::after {
     content: "";
     position: absolute;
     inset: 0;
     z-index: -1;
     background:
         radial-gradient(1200px 600px at 70% 20%, rgba(37, 61, 85, 0.35), transparent 60%),
         linear-gradient(to bottom, rgba(0, 0, 0, .35), rgba(0, 0, 0, .55));
 }

 .hero .container {
     display: grid;
     gap: 1.2rem;
     justify-items: start
 }



 .kicker {
     letter-spacing: .15em;
     text-transform: uppercase;
     opacity: .9
 }

 .cta-row {
     display: flex;
     gap: .8rem;
     flex-wrap: wrap
 }


 .hero .overlay {
     position: absolute;
     inset: 0;
         background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.45) 35%, rgb(0 0 0 / 40%) 70%, rgb(0 0 0 / 56%) 100%);
     z-index: -1;
 }


.heroanimateheading{
    font-weight: normal;
}

/* Skip Video Button */
.skip-video {
  position: absolute;
    top: 52rem;
    right: 4rem;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: 1px solid #ff4e00;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border-radius: 4px;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
}
.skip-video:hover {
  background: #ff4e00;
  color: #000;
}

/* Responsiveness */
.hero h1 {
  font-size: clamp(2.5rem, 6vw, 7rem);
}
.hero .sub {
  font-size: clamp(1rem, 2.5vw, 1.7rem);
  width: 100%;
  max-width: 76rem;
}
.hero-content {
  max-width: 100%;
  width: min(90%, 1057px);
}
.cta-row {
  flex-wrap: wrap;
  gap: 1rem;
}


 
 /* ===== Kill horizontal overflow & clamp rogue widths ===== */
html, body {
  overflow-x: hidden;           /* band-aid to hide any residual overflow */
}

/* Make sure core containers never exceed the viewport */
.container,
.container-meet,
.wrap {
  max-width: min(1200px, 92%);
  margin-inline: auto;
}

/* Any wide grids/rows should never overflow */
.achievements-grid,
.genz-list,
.principles,
.connect-grid,
.footer-grid,
.footer-bottom,
.pete-container,
.timeline,
.NewsLettercontainer {
  max-width: 100%;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* HERO (Meet Pete D) – remove hard width from wrapper if present */
.Meethero > div {
  width: auto !important;
  margin: 0 auto !important;
}

/* Footer: remove negative margins that push content outside the viewport */
.site-footer .footer-brand,
footer .footer-brand {
  margin: 0 !important;
}

/* Footer bottom bar: avoid fixed widths that overflow */
footer .footer-bottom {
  width: 100% !important;
}

/* Avoid 100vw traps (if used anywhere); prefer 100% */
[class*="fullwidth"],
.nav,
header,
footer,
section {
  max-width: 100%;
}

/* If any element is using 100vw, force it to respect the viewport */
*[style*="100vw"] {
  width: 100% !important;
  max-width: 100% !important;
}
/* ===== HERO LAYOUT: full-bleed video + overlaid content ===== */
:root{
  --hero-h-min: 520px;
  --hero-h: min(88vh, 900px);           /* fluid height across devices */
  --container: min(1200px, 92vw);
}

/* Wrapper */
.hero{
  position: relative;
  background:#000;                      /* dark theme baseline */
  color:#fff;
  isolation:isolate;                    /* keep overlay/content stacking clean */
  overflow: clip;                       /* no horizontal bleed */
}

/* Video area */
.hero-media{
  position: relative;
  width: 100%;
  min-height: var(--hero-h-min);
}

#heroVideo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;                    /* fill without distortion */
}

/* Gradient overlay on top of video for text contrast */
.hero .overlay{
  position:absolute; inset:0;
  /* left-to-right gradient so text on left pops; adjusts on small screens */
  background:
    linear-gradient(90deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.45) 35%, rgba(0,0,0,.12) 70%, rgba(0,0,0,0) 100%);
  pointer-events:none;
}

/* Content block sits above video */
.hero-content{
  position: absolute; inset: 0;
  display: grid;
  align-content: center;                /* vertical centering */
  gap: clamp(10px, 1.6vw, 16px);
  padding-inline: clamp(16px, 3.2vw, 28px);
  width:100%;
  max-width: var(--container);
  margin-inline:auto;                   /* center within page width */
}

/* Typography scales cleanly */
.hero .kicker{
  font-size: clamp(12px, 1.2vw, 14px);
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity:.9;
}

.hero h1{
  font-size: clamp(32px, 5.6vw, 64px);
  line-height: 1.05;
  letter-spacing:-.02em;
  margin: 0 0 .25em 0;
}

.hero p{
  max-width: 72ch;
  font-size: clamp(14px, 1.5vw, 18px);
  line-height: 1.6;
  opacity:.95;
  margin: 0;
}

/* CTA row */
.hero .cta-row{
  display:flex; gap: 12px; flex-wrap:wrap;
  margin-top: clamp(12px, 2vw, 20px);
}


.Herogold{
  background: linear-gradient(135deg, #ff4e00, #ff4e00);
  color:#121212;
    box-shadow: 0 4px 12px rgba(244, 164, 96, .4);
    transition: transform .3s ease, box-shadow .3s ease;
    font-family: 'Norwester', sans-serif;
}
.Herogold:hover{ 
  transform: translateY(-2px); 
 color: white !important;
    box-shadow: 0 6px 15px rgba(244, 164, 96, 1.6);
    background-color: black;
    font-family: 'Norwester', sans-serif;
}

.ghostbtn{
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
}
.ghostbtn:hover{ transform: translateY(-2px); border-color:#fff; }
.video-controls {
    display: flex;
    gap: 10px; /* space between buttons */
    position: absolute;
    bottom: 20px;  /* adjust placement */
    right: 20px;   /* adjust placement */
    z-index: 10;
  }

  .mute-btn {
    margin: 5rem 9rem;
    cursor: pointer;
  }
/* ===== Mobile-first adjustments ===== */
@media (max-width: 640px){
  /* a bit taller for copy on small phones */
  .hero-media{ height: min(96vh, 960px); }
  /* stronger overlay for tiny screens so text always readable */
  .hero .overlay{
    background: linear-gradient(90deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.18) 75%, rgba(0,0,0,0) 100%);
  }
  .hero p{ max-width: 60ch; }
}

/* ===== Tablet & Desktop polish ===== */
@media (min-width: 900px){
  .hero-content{
    grid-template-columns: 1fr;        /* easy to add a right column later */
    padding-top: clamp(20px, 6vh, 60px);
    padding-bottom: clamp(20px, 6vh, 60px);
  }
}

/* Accessibility: if user prefers less motion, don't animate video size */
@media (prefers-reduced-motion: reduce){
  .Herogold, .ghostbtn{ transition:none; }
}