.icon {
    width:42px; 
    height:42px; 
    border-radius:50%; 
    background:#1e293b; 
    color: white;
    display:flex; 
    align-items:center; 
    justify-content:center; 
    transition:0.4s;
  }
  .icon img {
    width:22px; 
    height:22px; 
    filter:invert(1); 
    transition:0.4s;
  }

  /* Brand colors on hover */
  .twitter:hover img { filter: none; fill:#1DA1F2; }
  .facebook:hover img { filter: none; fill:#1877F2; }
  .instagram:hover img { filter: none; fill:url(#instagramGradient); }
  .tiktok:hover img { filter: none; fill:#000000; }
  .youtube:hover img { filter: none; fill:#FF0000; }
/* ===== Footer (Responsive) ===== */
.site-footer{
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color:#e5e7eb;
  position:relative;
  overflow:hidden;
  padding-block: clamp(32px, 6vw, 64px);
}

/* Wave bg */
.site-footer .wave-bg{
  position:absolute; inset:auto 0 100% 0;
  height: 120px;
  background: url('https://svgshare.com/i/15Vb.svg') repeat-x;
  background-size: cover;
  opacity: .15;
  animation: wave 12s linear infinite;
  pointer-events:none;
}
@keyframes wave { to { background-position: 1200px 0; } }

/* Wrap grid: 4 -> 2 -> 1 */
.footer-wrap{
  max-width: 1300px;
  margin-inline:auto;
  padding-inline: clamp(16px,4vw,32px);
  display:grid;
  gap: clamp(16px, 2.4vw, 32px);
  grid-template-columns: repeat(4, minmax(0,1fr));
  position:relative; z-index:2;
}
@media (max-width: 1024px){
  .footer-wrap{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .footer-wrap{ grid-template-columns: 1fr; }
}

/* Brand */
.footer-brand .brand-row{
  display:flex; align-items:center; gap: .8rem; margin-bottom: .9rem;
}
.footer-brand .logo{
  width:50px; height:50px; border-radius:14px;
  background:linear-gradient(135deg, #ff4e00, #ff4e00);
  display:grid; place-items:center;
  box-shadow:0 4px 15px rgba(0,0,0,.4);
  overflow:hidden;
}
.footer-brand .logo img{ width:100%; height:100%; object-fit:cover; display:block; }
.footer-brand .brand-name{ color:#f9fafb; font-size:1.2rem; letter-spacing:.4px; font-weight:700; }
.footer-brand .brand-copy{ color:#cbd5e1; font-size:.98rem; line-height:1.6; margin:0; }

/* Links */
.footer-links h4,
.footer-news h4,
.footer-social h4{
  margin:0 0 .8rem; color:#f9fafb; font-size: clamp(1.1rem, 1.8vw, 2.05rem);
}
.footer-links ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.55rem; }
.footer-links a{
  color:#cbd5e1; text-decoration:none; transition: color .2s ease, transform .2s ease;
}
.footer-links a:hover{ color:#fff; transform: translateX(2px); }

/* Newsletter */
.footer-news p{ color:#cbd5e1; font-size:.95rem; margin:.2rem 0 1rem; }
.news-form{ display:flex; gap:.6rem; flex-wrap:wrap; }
.news-form input{
  flex:1 1 220px; min-width:0;
  padding:.7rem 1rem; border:none; border-radius:10px; outline:none;
  background:#1e293b; color:#f9fafb; font-size:.95rem;
}
.news-form button{
  padding:.7rem 1.1rem; border:none; border-radius:10px; cursor:pointer;
  background:linear-gradient(135deg, #ff4e00, #ff4e00); color:#fff; font-weight:700;
  transition: transform .2s ease, box-shadow .2s ease;
}
.news-form button:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.35); }

/* Social */
.footer-social .social-row{ display:flex; gap:.75rem; flex-wrap:wrap; }
.footer-social a{
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  background:#1e293b; transition: transform .2s ease, background .2s ease;
}
.footer-social a:hover{ transform: translateY(-2px); background:#243244; }
.footer-social img{ width:22px; height:22px; filter: invert(1); display:block; }

/* Bottom bar */
.footer-bottom{
  max-width:1300px; margin: clamp(16px,4vw,28px) auto 0;
  padding: clamp(12px,2vw,18px) clamp(16px,4vw,32px) 0;
  border-top:1px solid rgba(255,255,255,.12);
  color:#9ca3af; font-size: clamp(.9rem, 1.6vw, 1rem);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center;
}
/* ===== 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;
}