/* /v3/css/site.css — cleaned, consolidated */

/* =========================
   Theme
========================= */
:root{
  --logoRed:#D7182A;

  --panelBorder: rgba(255,255,255,.14);
  --panelBg: rgba(0,0,0,.35);

  --pillBorder: rgba(255,255,255,.18);
  --pillBg: rgba(255,255,255,.08);

  --fadeEdge: rgba(0,0,0,.85);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

/* =========================
   Page background
========================= */
body{
  margin:0;
  min-height:100vh;
  color:#fff;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  background:
    radial-gradient(1200px 700px at 50% 15%, rgba(0,130,190,.18), rgba(0,0,0,0) 55%),
    radial-gradient(900px 600px at 20% 80%, rgba(0,90,150,.12), rgba(0,0,0,0) 60%),
    radial-gradient(900px 600px at 85% 75%, rgba(0,160,220,.10), rgba(0,0,0,0) 60%),
    #000;
}

/* =========================
   Layout
========================= */
.wrap{
  width:min(1100px,92vw);
  margin:0 auto;
  padding:18px 16px 32px;
  position:relative;
  z-index:1;
}

main{ padding-top:18px; }

footer{
  margin-top:22px;
  font-size:12px;
  opacity:.6;
  text-align:center;
  padding:18px 0;
  border-top:1px solid rgba(255,255,255,.08);
}

/* =========================
   Header / Brand
========================= */
.header.header-stacked{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding-top:10px;
  padding-bottom:0;
}

.brand.brand-center{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.brandLink{
  display:inline-flex;
  justify-content:center;
  align-items:center;
}

.brandLogoHorizontal{
  width:80vw;
  max-width:950px;
  max-height:20vh;
  height:auto;
  display:block;
  margin:0 auto;
  filter: drop-shadow(0 10px 30px rgba(0,160,255,.14));
  transition: filter .3s ease, transform .3s ease;
}
.brandLink:hover .brandLogoHorizontal{
  filter: drop-shadow(0 14px 40px rgba(0,160,255,.22));
  transform:scale(1.01);
}

/* =========================
   Typography
========================= */
h1{
  margin:0 0 10px;
  font-size:clamp(26px,3.6vw,44px);
  letter-spacing:.01em;
}

.subtag{
  margin:0 0 18px;
  color:var(--logoRed);
  font-weight:900;
  letter-spacing:.03em;
}

/* =========================
   Panels / Cards / Grids
========================= */
.panel{
  border:1px solid var(--panelBorder);
  background:var(--panelBg);
  border-radius:18px;
  padding:18px 14px;
  transition: border-color .22s ease, box-shadow .22s ease;
}

.grid3{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
}
@media (max-width:860px){
  .grid3{ grid-template-columns:1fr; }
}

.card{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  border-radius:16px;
  padding:14px;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.card:hover{
  transform:translateY(-3px);
  border-color:rgba(0,160,220,.35);
  box-shadow:0 8px 28px rgba(0,120,200,.12);
  background:rgba(255,255,255,.065);
}
.card h3{ margin:0 0 6px; font-size:16px; }
.card p{ margin:0; opacity:.85; line-height:1.5; font-size:14px; }

/* =========================
   Pills / Nav
========================= */
.nav{
  display:flex;
  gap:10px;
  align-items:center;
}

.pill,
button.pill{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid var(--pillBorder);
  background:var(--pillBg);
  color:#fff;
  font-weight:800;
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  user-select:none;

  font-size:14px;
  font-family:inherit;
  line-height:1;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pill:hover,
button.pill:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.28);
  box-shadow:0 6px 18px rgba(0,120,200,.15);
}

.pill.primary{
  background:#0a7fd6;
  border-color:transparent;
  box-shadow:0 10px 22px rgba(10,127,214,.22);
}
.pill.primary:hover{
  background:#0b8de8;
  box-shadow:0 12px 28px rgba(10,127,214,.32);
}

.nav.nav-scroll.nav-center{
  width:100%;
  justify-content:flex-start;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  padding:8px 6px 14px;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
}
.nav.nav-scroll.nav-center::-webkit-scrollbar{ display:none; }

.nav.nav-scroll.nav-center .pill{
  flex:0 0 auto;
  white-space:nowrap;
  scroll-snap-align:start;
}

@media (max-width:980px){
  .pill{ padding:9px 12px; font-size:14px; }
}

.navFade{
  position:relative;
  width:100%;
}
.navFade:before,
.navFade:after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:26px;
  pointer-events:none;
  z-index:3;
}
.navFade:before{
  left:0;
  background: linear-gradient(to right, var(--fadeEdge), rgba(0,0,0,0));
}
.navFade:after{
  right:0;
  background: linear-gradient(to left, var(--fadeEdge), rgba(0,0,0,0));
}

.swipeHint{
  display:none;
  text-align:center;
  font-size:12px;
  opacity:.65;
  margin-top:-6px;
  letter-spacing:.02em;
}
@media (max-width:980px){
  .swipeHint{ display:block; }
}

.pill.va-flag-bg{
  border-color: rgba(255,255,255,.35) !important;
  color: #fff !important;
  font-weight: 900 !important;

  background:
    linear-gradient(#1f3c88, #1f3c88) left top / 42% 58% no-repeat,
    repeating-linear-gradient(
      to bottom,
      #b22234 0px,
      #b22234 8px,
      #ffffff 8px,
      #ffffff 16px
    ) !important;

  box-shadow:
    0 10px 22px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.20) inset !important;

  text-shadow: 0 2px 6px rgba(0,0,0,.55) !important;
}

/* =========================
   Contact reveal panel
========================= */
.contactPanel{
  width:min(560px,100%);
  border:1px solid var(--panelBorder);
  background:var(--panelBg);
  border-radius:14px;
  padding:12px 12px;
  display:none;
  margin:10px auto 0;
  text-align:center;
  font-size:16px;
  font-weight:800;
  line-height:1.35;
}

.muted{
  opacity:.70;
  font-size:12px;
  margin-top:6px;
  font-weight:600;
}

.publicFlash{
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  padding:14px 16px;
  margin-bottom:14px;
  line-height:1.6;
}
.publicFlash.success{
  background:rgba(34,197,94,.14);
  border-color:rgba(34,197,94,.28);
}
.publicFlash.error{
  background:rgba(239,68,68,.14);
  border-color:rgba(239,68,68,.28);
}

.publicSplit{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
  gap:16px;
  align-items:start;
}

.publicFormCard{
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035));
  border-radius:18px;
  padding:18px;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.publicFormCard h2,
.publicFormCard h3{
  margin:0 0 8px;
}
.publicFormCard p{
  margin:0;
  opacity:.84;
  line-height:1.6;
}

.publicForm{
  display:grid;
  gap:12px;
}
.publicFieldRow{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}
.publicForm label{
  display:block;
  margin:0 0 6px;
  font-size:13px;
  font-weight:800;
  color:rgba(255,255,255,.82);
}
.publicForm input[type="text"],
.publicForm input[type="email"],
.publicForm input[type="tel"],
.publicForm select,
.publicForm textarea{
  width:100%;
  padding:12px 13px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(5,14,24,.84);
  color:#fff;
  font:inherit;
}
.publicForm textarea{
  min-height:140px;
  resize:vertical;
}
.publicForm input::placeholder,
.publicForm textarea::placeholder{
  color:rgba(255,255,255,.48);
}
.publicForm button{
  justify-self:start;
}
.publicHelper{
  opacity:.72;
  font-size:12px;
  line-height:1.55;
}
.publicHoneypot{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

@media (max-width:860px){
  .publicSplit,
  .publicFieldRow{
    grid-template-columns:1fr;
  }
}

.contactPanel a{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:2px;
  font-weight:800;
}

.contactGrid{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:10px;
  row-gap:8px;
  text-align:left;
  width:min(520px,100%);
  margin:0 auto;
}
.label{ opacity:.85; white-space:nowrap; }
.value{ word-break:break-word; }

/* =========================
   Banners & Images
========================= */
.bannerStrip{
  width:100%;
  height:160px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  object-fit:cover;
  object-position:center;
  display:block;
}
@media (max-width:720px){
  .bannerStrip{ height:120px; }
}

/* Volunteer banner base */
.bannerVol{
  width:100%;
  height:160px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  object-fit:cover;
  object-position:center;
  display:block;
}

/* Get Certified card thumbnails */
.cardThumb{
  width:100%;
  height:140px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  object-fit:cover;
  object-position:center;
  display:block;
}
@media (min-width:900px){
  .cardThumb{ height:160px; }
}

/* =========================
   Bubbles (HOME ONLY)
========================= */
.bubbles{
  position:fixed;
  left:-10vw;
  right:-10vw;
  top:clamp(120px, 15vh, 200px);
  bottom:-20vh;
  pointer-events:none;
  z-index:4;
  opacity:1;
  filter:saturate(1.6) contrast(1.15);
  mix-blend-mode:screen;
}

.bubble{
  position:absolute;
  bottom:-30vh;
  width:var(--s,24px);
  height:var(--s,24px);
  border-radius:50%;
  left:var(--x,50%);

  background:
    radial-gradient(circle at 30% 30%,
      rgba(230, 250, 255, .75) 0%,
      rgba( 80, 210, 255, .55) 28%,
      rgba(  0, 120, 255, .25) 52%,
      rgba(  0,   0,   0,  0) 70%);

  border:2px solid rgba(40,190,255,.65);

  box-shadow:
    0 0 55px rgba(0,160,255,.55),
    0 0 18px rgba(0,120,255,.45),
    inset 0 0 18px rgba(230,250,255,.35),
    inset 0 0 40px rgba(0,140,255,.18);

  animation: floatUp var(--d,18s) linear infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes floatUp{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  8%{ opacity:1; }
  100%{ transform:translateY(-130vh) translateX(var(--drift,40px)); opacity:0; }
}

@media (max-width:720px){
  .bubbles{
    top:110px;
  }
}

/* =========================
   Desktop-only overrides
========================= */
@media (min-width:900px){
  .navFade{
    display:flex;
    justify-content:center;
  }

  .navFade .nav.nav-scroll{
    display:flex !important;
    justify-content:center !important;
    align-items:center;
    width:100%;
    margin:0 auto;
    overflow-x:visible !important;
    flex-wrap:wrap;
    row-gap:10px;
  }

  .swipeHint{ display:none; }
}

/* =========================
   HARD OVERRIDE (wins against any global img rules)
   This is what fixes your mobile issue.
========================= */
img.bannerVol{
  width:100% !important;
  height:160px !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
}

@media (max-width:720px){
  img.bannerVol{
    height:160px !important; /* mobile height you wanted */
    object-fit:cover !important;
    object-position:center center !important;
  }
}

/* =========================
   Homepage polish
========================= */
.heroPanel{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(280px,.8fr);
  gap:18px;
  padding:24px 20px;
  overflow:hidden;
  position:relative;
  background:
    linear-gradient(135deg, rgba(5,80,140,.35), rgba(0,0,0,.2) 55%, rgba(0,120,180,.20)),
    rgba(0,0,0,.34);
}
.heroPanel::after{
  content:"";
  position:absolute;
  right:-80px;
  top:-60px;
  width:260px;
  height:260px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(40,180,255,.18), rgba(40,180,255,0) 70%);
  pointer-events:none;
}
.heroCopy,
.heroSide{ position:relative; z-index:1; }
.kicker{
  font-size:12px;
  letter-spacing:.14em;
  font-weight:900;
  color:rgba(255,255,255,.78);
  margin-bottom:8px;
}
.heroLead{
  margin:0;
  max-width:700px;
  font-size:17px;
  line-height:1.65;
  opacity:.92;
}
.heroActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.heroMission{
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}
.heroMissionLabel{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:900;
  opacity:.72;
  margin-bottom:8px;
}
.heroMission p{
  margin:0;
  font-size:15px;
  line-height:1.65;
  opacity:.92;
}
.heroSignature{
  margin-top:12px;
  font-weight:900;
  color:#9ddcff;
}
.homePromoPanel{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
}
.sectionHead{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:12px;
  margin-bottom:14px;
}
.sectionHead.compact h2,
.impactText h2,
.brandsPanel h2{
  margin:0;
  font-size:clamp(22px, 3vw, 34px);
}
.homeScheduleGrid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:14px;
}
.scheduleBucket{
  padding:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
}
.scheduleTitle{
  display:inline-block;
  color:#fff;
  text-decoration:none;
  font-weight:900;
  font-size:18px;
  margin-bottom:12px;
}
.scheduleTitle:hover{ color:#9ddcff; }
.scheduleList{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.scheduleList li a{
  display:block;
  text-decoration:none;
  color:#fff;
  padding:10px 10px 10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.scheduleList li a:hover{
  transform:translateY(-2px);
  border-color:rgba(0,160,220,.38);
  background:rgba(255,255,255,.06);
}
.scheduleDate{
  display:block;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#8fdcff;
  margin-bottom:4px;
}
.scheduleItemTitle{
  display:block;
  font-size:15px;
  font-weight:800;
  line-height:1.35;
}
.scheduleMeta{
  display:block;
  margin-top:4px;
  font-size:12px;
  opacity:.7;
}
.quickLinksGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
}
.featureCard{
  min-height:190px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:8px;
  padding:18px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.13);
  text-decoration:none;
  color:#fff;
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.25));
  box-shadow:0 10px 32px rgba(0,0,0,.18);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.featureCard::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.72));
  z-index:0;
}
.featureCard::after{
  content:"";
  position:absolute;
  inset:auto -20% -35% auto;
  width:170px;
  height:170px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.14), rgba(255,255,255,0) 70%);
  z-index:0;
}
.featureCard > *{ position:relative; z-index:1; }
.featureCard:hover{
  transform:translateY(-4px);
  border-color:rgba(0,160,220,.42);
  box-shadow:0 16px 40px rgba(0,60,120,.25);
}
.featureEyebrow{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:900;
  color:rgba(255,255,255,.76);
}
.featureCard strong{
  font-size:26px;
  line-height:1.08;
}
.featureCard span:last-child{
  font-size:14px;
  line-height:1.55;
  opacity:.92;
}
.featureCert{ background:linear-gradient(135deg, rgba(0,113,201,.55), rgba(0,0,0,.15)); }
.featureShop{ background:linear-gradient(135deg, rgba(6,95,70,.48), rgba(0,0,0,.15)); }
.featureSpecial{ background:linear-gradient(135deg, rgba(112,40,145,.52), rgba(0,0,0,.15)); }
.featureVA{ background:linear-gradient(135deg, rgba(163,30,45,.52), rgba(0,0,0,.15)); }
.featureVolunteer{ background:linear-gradient(135deg, rgba(140,92,0,.52), rgba(0,0,0,.15)); }
.featureAbout{ background:linear-gradient(135deg, rgba(39,87,139,.48), rgba(0,0,0,.15)); }
.impactStrip{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) auto;
  align-items:center;
  gap:18px;
  padding:22px 20px;
}
.impactText p{
  margin:10px 0 0;
  max-width:760px;
  line-height:1.65;
  opacity:.9;
}
.impactActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}
.quoteCard{
  border-left:3px solid rgba(0,160,220,.52);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
}
.quoteText{
  margin:0;
  font-style:italic;
  line-height:1.65;
  opacity:.95;
}
.quoteBy{
  margin:12px 0 0;
  font-size:13px;
  font-weight:900;
  opacity:.72;
}
.brandBadgeRow{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
}
.brandBadge{
  min-width:130px;
  min-height:74px;
  padding:12px 16px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(255,255,255,.05);
  display:flex;
  align-items:center;
  justify-content:center;
}
.brandBadge img{
  max-width:100%;
  max-height:40px;
  object-fit:contain;
  display:block;
}
.brandBadge.textOnly{
  font-weight:900;
  font-size:15px;
  letter-spacing:.03em;
  color:rgba(255,255,255,.86);
}

@media (max-width:1100px){
  .homeScheduleGrid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:980px){
  .heroPanel,
  .impactStrip,
  .quickLinksGrid{ grid-template-columns:1fr; }
  .impactActions{ justify-content:flex-start; }
}
@media (max-width:720px){
  .heroPanel{ padding:18px 16px; }
  .heroLead{ font-size:15px; }
  .sectionHead,
  .sectionHead.compact,
  .centerOnMobile{
    align-items:flex-start;
    flex-direction:column;
  }
  .homeScheduleGrid{ grid-template-columns:1fr; }
  .featureCard{ min-height:170px; }
  .featureCard strong{ font-size:22px; }
}