:root{--navy:#071b3a;--navy2:#0b2a55;--gold:#d8ad45;--gold2:#f3d27a;--white:#fff;--soft:#f7f3e9;--ink:#13213a;--muted:#657089;--line:#e8dfcf;--shadow:0 18px 55px rgba(7,27,58,.16);--radius:22px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:#fff;line-height:1.6}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.topbar{background:var(--navy);color:#fff;font-size:.92rem;padding:.45rem 0}.wrap{width:min(1180px,92%);margin:auto}.topbar .wrap,.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem}.pill{display:inline-flex;align-items:center;gap:.5rem;border:1px solid rgba(216,173,69,.45);border-radius:999px;padding:.45rem .8rem;color:var(--gold2)}.nav{position:sticky;top:0;background:rgba(255,255,255,.95);backdrop-filter:blur(14px);z-index:20;border-bottom:1px solid #eee}.brand{display:flex;align-items:center;gap:.8rem;font-weight:900;letter-spacing:.02em;color:var(--navy);padding:.8rem 0}.brand img{width:54px;height:54px}.brand span{display:block;font-size:.8rem;color:var(--muted);font-weight:700}.links{display:flex;gap:.9rem;align-items:center;font-size:.94rem;font-weight:800;color:var(--navy)}.links a{padding:.6rem .3rem}.btn,.button{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;border-radius:999px;padding:.82rem 1.15rem;font-weight:900;border:0;cursor:pointer}.btn.gold{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#0a1c39;box-shadow:0 10px 24px rgba(216,173,69,.25)}.btn.navy{background:var(--navy);color:#fff}.btn.white{background:#fff;color:var(--navy)}.hamb{display:none;background:none;border:0;font-size:1.7rem;color:var(--navy)}.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 15% 10%,rgba(216,173,69,.25),transparent 28%),linear-gradient(135deg,var(--navy),#0f376c);color:#fff}.hero:after{content:"";position:absolute;inset:auto -10% -35% 40%;height:65%;background:rgba(255,255,255,.05);transform:rotate(-8deg);border-radius:60px}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;padding:5rem 0;position:relative;z-index:1}.eyebrow{text-transform:uppercase;letter-spacing:.18em;color:var(--gold2);font-weight:900;font-size:.78rem}.hero h1,.page-hero h1{font-family:Georgia,serif;font-size:clamp(2.8rem,6vw,5.7rem);line-height:.95;margin:.6rem 0 1rem}.lead{font-size:1.16rem;color:rgba(255,255,255,.88);max-width:720px}.hero-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:34px;padding:1rem;box-shadow:var(--shadow)}.photo-placeholder{min-height:430px;border-radius:26px;background:linear-gradient(135deg,rgba(216,173,69,.55),rgba(255,255,255,.12)),url('images/outreach-pattern.svg');background-size:cover;display:flex;align-items:end;padding:1.2rem}.caption{background:rgba(7,27,58,.82);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:1rem}.section{padding:4.8rem 0}.section.soft{background:var(--soft)}.section.dark{background:var(--navy);color:#fff}.section-title{max-width:820px;margin-bottom:2rem}.section-title h2{font-family:Georgia,serif;font-size:clamp(2rem,4vw,3.5rem);line-height:1;margin:.35rem 0;color:var(--navy)}.dark .section-title h2{color:#fff}.section-title p{color:var(--muted);font-size:1.08rem}.dark .section-title p{color:rgba(255,255,255,.75)}.grid{display:grid;gap:1.3rem}.grid.cols-3{grid-template-columns:repeat(3,1fr)}.grid.cols-4{grid-template-columns:repeat(4,1fr)}.grid.cols-2{grid-template-columns:repeat(2,1fr)}.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.35rem;box-shadow:0 10px 30px rgba(7,27,58,.06)}.dark .card{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff}.icon{width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,var(--gold),var(--gold2));display:grid;place-items:center;font-size:1.4rem;margin-bottom:.8rem}.stat{font-size:2.4rem;font-weight:1000;color:var(--navy);line-height:1}.dark .stat{color:var(--gold2)}.mini{color:var(--muted);font-size:.94rem}.dark .mini{color:rgba(255,255,255,.72)}.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:2rem;align-items:center}.quote{font-family:Georgia,serif;font-size:1.45rem;color:var(--navy);line-height:1.25}.banner{background:linear-gradient(135deg,var(--gold),var(--gold2));border-radius:32px;padding:2rem;color:#0a1c39;display:flex;justify-content:space-between;gap:1rem;align-items:center;box-shadow:var(--shadow)}.page-hero{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;padding:4rem 0}.page-hero h1{font-size:clamp(2.6rem,5vw,4.6rem)}.breadcrumbs{color:var(--gold2);font-weight:800}.form{display:grid;gap:.9rem}.form input,.form textarea,.form select{width:100%;padding:1rem;border:1px solid var(--line);border-radius:14px;font:inherit}.form textarea{min-height:130px}.timeline{border-left:3px solid var(--gold);padding-left:1.2rem}.event{margin-bottom:1.3rem}.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:.8rem}.tile{border-radius:18px;min-height:145px;background:linear-gradient(135deg,#e7d5aa,#102a55);display:flex;align-items:end;padding:.8rem;color:#fff;font-weight:900;overflow:hidden}.tile:nth-child(2n){background:linear-gradient(135deg,#122b58,#d8ad45)}.tile.wide{grid-column:span 2}.tile.tall{grid-row:span 2;min-height:300px}.footer{background:#06162f;color:#fff;padding:3rem 0 1.5rem}.footer-grid{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:2rem}.footer a,.footer p{color:rgba(255,255,255,.75)}.footer h4{color:var(--gold2)}.subfooter{border-top:1px solid rgba(255,255,255,.12);margin-top:2rem;padding-top:1rem;color:rgba(255,255,255,.55);font-size:.9rem}.notice{background:#fff7df;border:1px solid #f0dc9b;border-radius:16px;padding:1rem}.download{display:flex;justify-content:space-between;gap:1rem;align-items:center;border:1px dashed var(--gold);padding:1rem;border-radius:18px;background:#fff}.video{aspect-ratio:16/9;border-radius:20px;background:linear-gradient(135deg,var(--navy),var(--gold));display:grid;place-items:center;color:#fff;font-weight:900}.map{min-height:360px;border:0;border-radius:22px;width:100%}@media(max-width:980px){.links{display:none;position:absolute;top:76px;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;padding:1rem 4%;border-bottom:1px solid #eee}.links.open{display:flex}.hamb{display:block}.hero-grid,.split,.grid.cols-2,.grid.cols-3,.grid.cols-4,.footer-grid{grid-template-columns:1fr}.hero-grid{padding:3.5rem 0}.photo-placeholder{min-height:310px}.banner{display:block}.gallery{grid-template-columns:repeat(2,1fr)}.tile.wide{grid-column:span 1}.tile.tall{grid-row:span 1;min-height:145px}.topbar .wrap{display:block}.topbar .pill{margin-top:.4rem}.brand strong{font-size:.92rem}}
.grid.cols-5{grid-template-columns:repeat(5,1fr)}
@media(max-width:980px){.grid.cols-5{grid-template-columns:1fr}}

.small-photo{min-height:320px}
.tile span{display:block;font-size:.78rem;font-weight:700;opacity:.86;margin-top:.25rem}
.newsletter{gap:.55rem;margin-top:.7rem}.newsletter input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}.newsletter input::placeholder{color:rgba(255,255,255,.6)}
.grid.cols-6{grid-template-columns:repeat(6,1fr)}
@media(max-width:1100px){.grid.cols-6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:980px){.grid.cols-6{grid-template-columns:1fr}}

/* Version 6: Transparent official FFF logo integration */
.brand img{width:88px;height:88px;object-fit:contain;border-radius:0;background:transparent;padding:0;filter:drop-shadow(0 6px 10px rgba(7,27,58,.10))}
.nav .brand{padding:.55rem 0;gap:1rem}
.hero-logo-mark{width:255px;max-width:55vw;height:auto;object-fit:contain;border-radius:0;background:transparent;padding:0;margin-bottom:1rem;filter:drop-shadow(0 16px 28px rgba(0,0,0,.22))}
.page-logo-feature{width:260px;max-width:70vw;height:auto;object-fit:contain;border-radius:0;background:transparent;padding:0;border:0;box-shadow:none;filter:drop-shadow(0 12px 22px rgba(7,27,58,.16));margin-bottom:1.15rem}
.footer .brand img{width:115px;height:115px;background:transparent;border-radius:0;padding:0;filter:drop-shadow(0 10px 20px rgba(0,0,0,.25))}
@media(max-width:980px){.brand img{width:68px;height:68px}.links{top:96px}.hero-logo-mark{width:185px}.page-logo-feature{width:210px}.footer .brand img{width:95px;height:95px}.nav .brand strong{font-size:.9rem}}
@media(max-width:520px){.brand img{width:58px;height:58px}.links{top:86px}.hero-logo-mark{width:165px}.page-logo-feature{width:190px}.brand span{font-size:.72rem}}


/* Version 7: premium transparent-logo hero branding for interior pages */
.page-hero{position:relative;overflow:hidden}
.page-hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:2rem;align-items:center}
.page-hero-copy{max-width:760px}
.page-hero-brand{display:flex;align-items:center;justify-content:flex-end;min-height:210px;pointer-events:none}
.page-hero-watermark{width:330px;max-width:100%;height:auto;object-fit:contain;opacity:.26;filter:drop-shadow(0 24px 40px rgba(0,0,0,.22));mix-blend-mode:screen}
.page-hero:before{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(216,173,69,.20),rgba(216,173,69,.05) 48%,transparent 70%)}
@media(max-width:980px){.page-hero .wrap{grid-template-columns:1fr}.page-hero-brand{justify-content:flex-start;min-height:auto;margin-top:.5rem}.page-hero-watermark{width:210px;opacity:.22}.page-hero:before{right:-210px;top:-170px}}
@media(max-width:520px){.page-hero-watermark{width:175px}.page-hero-brand{margin-top:0}}

/* Version 8: subtle full-site transparent-logo watermark background */
body{position:relative;background:#fff}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background-image:url('../images/fff-logo-transparent.png');background-repeat:no-repeat;background-position:center 58%;background-size:min(72vw,760px) auto;opacity:.045}
.topbar,.nav,.hero,.page-hero,.section,.footer{position:relative;z-index:1}
.section{position:relative;overflow:hidden}
.section>.wrap{position:relative;z-index:2}
.section::before{content:"";position:absolute;right:max(-130px,-8vw);top:50%;width:min(56vw,620px);height:min(56vw,620px);transform:translateY(-50%);background-image:url('../images/fff-logo-transparent.png');background-repeat:no-repeat;background-position:center;background-size:contain;opacity:.055;pointer-events:none;z-index:0}
.section.soft::before{opacity:.065}
.section.dark::before{opacity:.035;filter:brightness(1.45)}
.card,.banner,.photo-placeholder,.tile,.video,.download,.notice,.form input,.form textarea,.form select{position:relative;z-index:2}
.page-hero .wrap{z-index:2}
.page-hero-watermark{opacity:.22}
@media(max-width:980px){body::before{background-size:min(92vw,520px) auto;background-position:center 62%;opacity:.04}.section::before{right:-190px;width:520px;height:520px;opacity:.04}.section.soft::before{opacity:.05}.section.dark::before{opacity:.03}.page-hero-watermark{opacity:.20}}
@media(max-width:520px){body::before{background-size:105vw auto;opacity:.035}.section::before{right:-240px;width:440px;height:440px;opacity:.035}.section.soft::before{opacity:.045}}

/* Version 9: cleaned watermark accent treatment
   Uses one subtle, intentional logo accent per major section instead of a full-page/repeated feel. */
body::before{display:none !important}
.section{overflow:hidden}
.section::before{
  right:clamp(1.75rem,6vw,5.5rem) !important;
  top:50% !important;
  width:min(34vw,430px) !important;
  height:min(34vw,430px) !important;
  transform:translateY(-50%) !important;
  background-size:contain !important;
  background-position:center !important;
  opacity:.035 !important;
}
.section.soft::before{opacity:.045 !important}
.section.dark::before{opacity:.026 !important;filter:brightness(1.35)}
.footer::before{content:none !important}
.card,.banner,.photo-placeholder,.tile,.video,.download,.notice,.form,.form input,.form textarea,.form select,.newsletter{position:relative;z-index:3}
@media(max-width:980px){
  .section::before{
    right:clamp(1rem,5vw,2rem) !important;
    top:58% !important;
    width:min(58vw,360px) !important;
    height:min(58vw,360px) !important;
    opacity:.028 !important;
  }
  .section.soft::before{opacity:.035 !important}
  .section.dark::before{opacity:.022 !important}
}
@media(max-width:520px){
  .section::before{
    right:50% !important;
    top:62% !important;
    width:min(72vw,300px) !important;
    height:min(72vw,300px) !important;
    transform:translate(50%,-50%) !important;
    opacity:.022 !important;
  }
  .section.soft::before{opacity:.028 !important}
  .section.dark::before{opacity:.018 !important}
}

/* Version 10: architectural watermark system
   Keeps the existing design intact while making the transparent FFF logo feel intentional. */
:root{--fff-watermark:url('../images/fff-logo-transparent.png')}

/* Page title / hero areas: centered watermark behind the title content */
.page-hero{position:relative;overflow:hidden}
.page-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--fff-watermark);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:min(44vw,520px) auto;
  opacity:.06;
  pointer-events:none;
  z-index:0;
}
.page-hero .wrap{position:relative;z-index:2}
.page-hero-copy{position:relative;z-index:3}
.page-hero-brand{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1;pointer-events:none;min-height:0;margin:0}
.page-hero-watermark{width:min(44vw,520px);max-width:520px;opacity:.045;filter:none;mix-blend-mode:normal}

/* Major content sections: one large intentional watermark accent, never a repeated pattern. */
.section::before{
  content:"";
  position:absolute;
  background-image:var(--fff-watermark);
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  pointer-events:none;
  z-index:0;
  opacity:.045 !important;
  width:min(38vw,470px) !important;
  height:min(38vw,470px) !important;
  right:clamp(2.5rem,7vw,6rem) !important;
  top:50% !important;
  transform:translateY(-50%) !important;
}
.section.soft::before{opacity:.052 !important}
.section.dark::before{opacity:.034 !important;filter:brightness(1.35)}
.section>.wrap{position:relative;z-index:2}

/* Mission-style areas: right-side architectural mark. */
.section:has(.quote)::before,
.section:has(.section-title .eyebrow)::before{
  right:clamp(2rem,6vw,5rem) !important;
  top:50% !important;
  transform:translateY(-50%) !important;
}

/* Impact counters: faded mark centered behind the statistics area. */
.section:has(.stat)::before{
  left:50% !important;
  right:auto !important;
  top:50% !important;
  width:min(48vw,560px) !important;
  height:min(48vw,560px) !important;
  transform:translate(-50%,-50%) !important;
  opacity:.04 !important;
}
.section.dark:has(.stat)::before{opacity:.03 !important}

/* Newsletter areas: lower-right watermark, kept away from form fields. */
.footer{position:relative;overflow:hidden}
.footer::before{
  content:"" !important;
  position:absolute;
  right:clamp(1.5rem,5vw,4rem);
  bottom:clamp(1rem,4vw,3rem);
  width:min(32vw,380px);
  height:min(32vw,380px);
  background-image:var(--fff-watermark);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.04;
  pointer-events:none;
  z-index:0;
  filter:brightness(1.3);
}
.footer .wrap{position:relative;z-index:2}
.newsletter{position:relative;z-index:4}

/* Contact sections: upper-right watermark, behind form and map. */
.section:has(.map)::before,
.section:has(form[name="contact"])::before{
  right:clamp(2rem,6vw,5rem) !important;
  top:clamp(3rem,10vw,6rem) !important;
  transform:none !important;
  width:min(36vw,430px) !important;
  height:min(36vw,430px) !important;
  opacity:.038 !important;
}

/* Keep every foreground element above the architectural marks. */
.card,.banner,.photo-placeholder,.tile,.video,.download,.notice,.form,.form input,.form textarea,.form select,.btn,.button,.map,img:not(.page-hero-watermark){position:relative;z-index:3}

@media(max-width:980px){
  .page-hero::after{background-size:min(70vw,420px) auto;background-position:center 56%;opacity:.048}
  .page-hero-brand{justify-content:center;align-items:center}
  .page-hero-watermark{width:min(70vw,420px);opacity:.035}
  .section::before{
    width:min(56vw,360px) !important;
    height:min(56vw,360px) !important;
    right:clamp(1.25rem,5vw,2.5rem) !important;
    opacity:.034 !important;
  }
  .section.soft::before{opacity:.04 !important}
  .section.dark::before{opacity:.026 !important}
  .section:has(.stat)::before{
    width:min(70vw,420px) !important;
    height:min(70vw,420px) !important;
    opacity:.03 !important;
  }
  .section:has(.map)::before,
  .section:has(form[name="contact"])::before{
    right:1rem !important;
    top:2rem !important;
    width:min(58vw,340px) !important;
    height:min(58vw,340px) !important;
    opacity:.028 !important;
  }
  .footer::before{width:min(54vw,320px);height:min(54vw,320px);opacity:.032;right:1rem;bottom:1rem}
}
@media(max-width:520px){
  .page-hero::after{background-size:min(86vw,330px) auto;background-position:center 58%;opacity:.04}
  .page-hero-watermark{width:min(86vw,330px);opacity:.03}
  .section::before{
    width:min(72vw,300px) !important;
    height:min(72vw,300px) !important;
    right:50% !important;
    top:58% !important;
    transform:translate(50%,-50%) !important;
    opacity:.026 !important;
  }
  .section.soft::before{opacity:.032 !important}
  .section.dark::before{opacity:.02 !important}
  .section:has(.stat)::before{width:min(82vw,330px) !important;height:min(82vw,330px) !important;opacity:.024 !important}
  .section:has(.map)::before,
  .section:has(form[name="contact"])::before{
    right:50% !important;
    top:3rem !important;
    transform:translateX(50%) !important;
    width:min(72vw,300px) !important;
    height:min(72vw,300px) !important;
    opacity:.024 !important;
  }
  .footer::before{width:min(68vw,280px);height:min(68vw,280px);opacity:.026;right:.75rem;bottom:1.5rem}
}

/* Version 11: refined watermark architecture
   Uses the official transparent-background FFF logo as a structural brand accent.
   Placement rules: hero centered, mission right, impact centered, newsletter lower-right, contact upper-right. */
:root{--fff-watermark:url('../images/fff-logo-transparent.png')}

/* Keep all watermark art behind real content. */
.hero,.page-hero,.section,.footer{position:relative;overflow:hidden}
.hero > .wrap,.hero-grid,.page-hero .wrap,.section > .wrap,.footer .wrap{position:relative;z-index:2}
.card,.banner,.photo-placeholder,.tile,.video,.download,.notice,.form,.form input,.form textarea,.form select,.btn,.button,.map,.caption,.section-title,.grid,.split{position:relative;z-index:3}

/* Homepage hero: large centered brand watermark behind hero content. */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--fff-watermark);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:min(52vw,640px) auto;
  opacity:.055;
  pointer-events:none;
  z-index:0;
}
.hero::after{z-index:0}

/* Interior page title sections: large centered watermark behind page title content. */
.page-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--fff-watermark);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:min(48vw,560px) auto;
  opacity:.055;
  pointer-events:none;
  z-index:0;
}
.page-hero-brand{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:1;min-height:0;margin:0}
.page-hero-watermark{width:min(48vw,560px);max-width:560px;opacity:.035;filter:none;mix-blend-mode:normal}

/* Default major section watermark: right-side architectural mark, subtle and intentional. */
.section::before{
  content:"";
  position:absolute;
  background-image:var(--fff-watermark);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  pointer-events:none;
  z-index:0;
  width:min(38vw,470px) !important;
  height:min(38vw,470px) !important;
  right:clamp(2.5rem,7vw,6.5rem) !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  opacity:.042 !important;
}
.section.soft::before{opacity:.05 !important}
.section.dark::before{opacity:.032 !important;filter:brightness(1.35)}

/* Mission sections: large right-side watermark. */
.section:has(.quote)::before,
.section:has(.section-title .eyebrow)::before{
  right:clamp(2.25rem,7vw,6rem) !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:min(40vw,500px) !important;
  height:min(40vw,500px) !important;
  opacity:.044 !important;
}

/* Impact/stat sections: large faded background watermark behind the impact area. */
.section:has(.stat)::before{
  left:50% !important;
  right:auto !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:min(52vw,620px) !important;
  height:min(52vw,620px) !important;
  opacity:.04 !important;
}
.section.dark:has(.stat)::before{opacity:.03 !important}

/* Newsletter signup areas: lower-right watermark, away from form fields. */
.footer::before{
  content:"" !important;
  position:absolute;
  right:clamp(1.5rem,5vw,4.5rem);
  bottom:clamp(1rem,4vw,3.25rem);
  width:min(32vw,400px);
  height:min(32vw,400px);
  background-image:var(--fff-watermark);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.04;
  pointer-events:none;
  z-index:0;
  filter:brightness(1.3);
}
.newsletter{position:relative;z-index:4}

/* Contact sections: upper-right watermark behind the map/form content. */
.section:has(.map)::before,
.section:has(form[name="contact"])::before{
  right:clamp(2rem,6vw,5rem) !important;
  top:clamp(2.75rem,8vw,5.5rem) !important;
  transform:none !important;
  width:min(36vw,450px) !important;
  height:min(36vw,450px) !important;
  opacity:.036 !important;
}

@media(max-width:980px){
  .hero::before{background-size:min(78vw,460px) auto;background-position:center 52%;opacity:.045}
  .page-hero::after{background-size:min(74vw,430px) auto;background-position:center 55%;opacity:.045}
  .page-hero-watermark{width:min(74vw,430px);opacity:.028}
  .section::before,
  .section:has(.quote)::before,
  .section:has(.section-title .eyebrow)::before{
    width:min(58vw,380px) !important;
    height:min(58vw,380px) !important;
    right:clamp(1rem,5vw,2.5rem) !important;
    top:55% !important;
    opacity:.032 !important;
  }
  .section.soft::before{opacity:.038 !important}
  .section.dark::before{opacity:.024 !important}
  .section:has(.stat)::before{
    width:min(76vw,450px) !important;
    height:min(76vw,450px) !important;
    opacity:.028 !important;
  }
  .section:has(.map)::before,
  .section:has(form[name="contact"])::before{
    right:1rem !important;
    top:2rem !important;
    width:min(58vw,350px) !important;
    height:min(58vw,350px) !important;
    opacity:.026 !important;
  }
  .footer::before{width:min(54vw,330px);height:min(54vw,330px);opacity:.03;right:1rem;bottom:1rem}
}

@media(max-width:520px){
  .hero::before{background-size:min(92vw,340px) auto;background-position:center 55%;opacity:.036}
  .page-hero::after{background-size:min(88vw,330px) auto;background-position:center 58%;opacity:.038}
  .page-hero-watermark{width:min(88vw,330px);opacity:.024}
  .section::before,
  .section:has(.quote)::before,
  .section:has(.section-title .eyebrow)::before{
    width:min(76vw,300px) !important;
    height:min(76vw,300px) !important;
    right:50% !important;
    top:60% !important;
    transform:translate(50%,-50%) !important;
    opacity:.024 !important;
  }
  .section.soft::before{opacity:.03 !important}
  .section.dark::before{opacity:.018 !important}
  .section:has(.stat)::before{width:min(84vw,330px) !important;height:min(84vw,330px) !important;opacity:.022 !important}
  .section:has(.map)::before,
  .section:has(form[name="contact"])::before{
    right:50% !important;
    top:2.5rem !important;
    transform:translateX(50%) !important;
    width:min(74vw,300px) !important;
    height:min(74vw,300px) !important;
    opacity:.022 !important;
  }
  .footer::before{width:min(70vw,280px);height:min(70vw,280px);opacity:.024;right:.75rem;bottom:1.5rem}
}


/* Version 12: authentic FFF photo integration */
.photo-card{position:relative;z-index:3;margin:0;border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 14px 38px rgba(7,27,58,.10)}
.photo-card img{width:100%;height:100%;min-height:260px;object-fit:cover;display:block}
.photo-card.tall img{min-height:430px}.photo-card.short img{min-height:220px}.photo-card.wide img{min-height:330px}.photo-card.hero-photo img{min-height:430px}
.photo-card figcaption{position:absolute;left:1rem;right:1rem;bottom:1rem;background:rgba(7,27,58,.84);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:.9rem;font-weight:800;backdrop-filter:blur(8px)}
.photo-card figcaption span{display:block;color:rgba(255,255,255,.76);font-weight:600;font-size:.88rem;margin-top:.2rem}.photo-card.no-overlay figcaption{position:static;background:#fff;color:var(--ink);border:0;border-top:1px solid var(--line);border-radius:0}.photo-card.no-overlay figcaption span{color:var(--muted)}
.photo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:1.4rem}.photo-strip.two{grid-template-columns:repeat(2,1fr)}
.story-photo-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:1.2rem;align-items:stretch}.story-photo-grid .photo-card:first-child{grid-row:span 2}.story-photo-grid .photo-card:first-child img{min-height:520px}.story-photo-grid .photo-card:not(:first-child) img{min-height:250px}
.gallery.photo-gallery{grid-template-columns:repeat(12,1fr);gap:1rem}.photo-tile{grid-column:span 4;min-height:260px;border-radius:18px;overflow:hidden;position:relative;z-index:3;background:#102a55}.photo-tile.wide{grid-column:span 6}.photo-tile.tall{grid-row:span 2;min-height:540px}.photo-tile img{width:100%;height:100%;object-fit:cover}.photo-tile .tile-caption{position:absolute;left:.8rem;right:.8rem;bottom:.8rem;background:rgba(7,27,58,.84);color:#fff;border-radius:14px;padding:.8rem;font-weight:900}.photo-tile .tile-caption span{display:block;font-size:.78rem;font-weight:700;opacity:.86;margin-top:.2rem}
.hero-card .photo-card{border:1px solid rgba(255,255,255,.18);box-shadow:var(--shadow)}.hero-card .photo-card img{min-height:440px}.hero-card .photo-card figcaption{background:rgba(7,27,58,.86)}
@media(max-width:980px){.photo-strip,.photo-strip.two,.story-photo-grid{grid-template-columns:1fr}.story-photo-grid .photo-card:first-child{grid-row:auto}.story-photo-grid .photo-card:first-child img,.photo-card.tall img,.photo-card.hero-photo img,.hero-card .photo-card img{min-height:320px}.gallery.photo-gallery{grid-template-columns:repeat(2,1fr)}.photo-tile,.photo-tile.wide{grid-column:span 1}.photo-tile.tall{grid-row:span 1;min-height:260px}}
@media(max-width:520px){.gallery.photo-gallery{grid-template-columns:1fr}.photo-tile,.photo-tile.wide,.photo-tile.tall{grid-column:span 1;min-height:230px}.photo-card img{min-height:230px}.photo-card figcaption{left:.65rem;right:.65rem;bottom:.65rem;padding:.75rem}.hero-card .photo-card img{min-height:300px}}

/* Version 15: Team and volunteer photo integration */
/* Leadership portrait refinement: use the full portrait artwork so faces, shirt logos, name bars, titles, and FFF branding stay visible. */
.leadership-grid .photo-card.no-overlay{display:flex;flex-direction:column;overflow:hidden}
.leadership-grid .photo-card.no-overlay img{width:100%;height:auto;min-height:0;aspect-ratio:4 / 3;object-fit:contain;object-position:center center;background:#fff;padding:.55rem}
.leadership-grid .photo-card.no-overlay figcaption{flex:0 0 auto}
.leadership-grid .photo-card.no-overlay .leader-note{padding:0 1rem 1rem;margin:.35rem 0 0;color:var(--muted);font-size:.95rem;line-height:1.55}
.volunteer-feature .photo-card img{min-height:340px}.team-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}.team-photo-grid .photo-card img{min-height:320px;object-position:center top}@media(max-width:980px){.team-photo-grid{grid-template-columns:1fr}.leadership-grid .photo-card.no-overlay img{aspect-ratio:4 / 3;padding:.45rem}.team-photo-grid .photo-card img{min-height:280px}}
@media(max-width:520px){.leadership-grid .photo-card.no-overlay img{aspect-ratio:4 / 3;padding:.35rem}}

/* Version 17 refinement: lift the About page storytelling collage slightly without changing the overall layout. */
.story-photo-grid.action-collage {
  margin-top: -18px;
}
@media (max-width: 760px) {
  .story-photo-grid.action-collage {
    margin-top: -8px;
  }
}

.leader-note{padding:0 1rem 1.1rem;margin:-.35rem 0 0;color:var(--muted);font-size:.92rem;line-height:1.55;background:#fff}

/* Version 20: balanced photo gallery and collage refinement.
   Every photograph should tell a story: use calm, consistent grids that protect faces, hands, logos, and outreach context. */
.photo-card,
.photo-tile{
  border-radius:20px;
  overflow:hidden;
}
.photo-card img{
  min-height:0;
  height:clamp(230px, 26vw, 340px);
  object-fit:cover;
  object-position:center center;
}
.photo-card.short img,
.photo-card.wide img,
.photo-card.tall img{
  min-height:0;
  height:clamp(230px, 26vw, 340px);
}
.hero-card .photo-card img,
.photo-card.hero-photo img{
  min-height:0;
  height:clamp(320px, 42vw, 460px);
}
.photo-strip,
.photo-strip.two{
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  align-items:stretch;
}
.photo-strip .photo-card img,
.team-photo-grid .photo-card img,
.volunteer-feature .photo-card img{
  min-height:0;
  height:clamp(240px, 28vw, 340px);
}
.story-photo-grid,
.story-photo-grid.action-collage{
  grid-template-columns:repeat(3,1fr);
  gap:1.15rem;
  align-items:stretch;
  margin-top:0;
}
.story-photo-grid .photo-card:first-child{
  grid-row:auto;
}
.story-photo-grid .photo-card:first-child img,
.story-photo-grid .photo-card:not(:first-child) img{
  min-height:0;
  height:clamp(240px, 28vw, 340px);
}
.gallery.photo-gallery{
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1rem;
  align-items:stretch;
}
.photo-tile,
.photo-tile.wide,
.photo-tile.tall{
  grid-column:auto;
  grid-row:auto;
  min-height:0;
  height:clamp(230px, 25vw, 330px);
}
.photo-tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
/* Keep leadership portraits as full artwork so the name bars, titles, shirt logos, and FFF branding remain visible. */
.leadership-grid .photo-card.no-overlay img{
  height:auto;
  min-height:0;
  aspect-ratio:4 / 3;
  object-fit:contain;
  object-position:center center;
  padding:.7rem;
  background:#fff;
}
/* Improve context on supply and service photos without over-enlarging. */
img[src*="hygiene"],
img[src*="clothing"],
img[src*="meal"],
img[src*="food"],
img[src*="volunteer"],
img[src*="partner"]{
  object-position:center center;
}
@media(max-width:980px){
  .story-photo-grid,
  .story-photo-grid.action-collage{
    grid-template-columns:repeat(2,1fr);
  }
  .photo-card img,
  .photo-card.short img,
  .photo-card.wide img,
  .photo-card.tall img,
  .photo-strip .photo-card img,
  .team-photo-grid .photo-card img,
  .volunteer-feature .photo-card img,
  .story-photo-grid .photo-card:first-child img,
  .story-photo-grid .photo-card:not(:first-child) img,
  .photo-tile,
  .photo-tile.wide,
  .photo-tile.tall{
    height:280px;
    min-height:0;
  }
  .hero-card .photo-card img,
  .photo-card.hero-photo img{
    height:340px;
    min-height:0;
  }
}
@media(max-width:620px){
  .story-photo-grid,
  .story-photo-grid.action-collage,
  .gallery.photo-gallery,
  .photo-strip,
  .photo-strip.two{
    grid-template-columns:1fr;
  }
  .photo-card img,
  .photo-card.short img,
  .photo-card.wide img,
  .photo-card.tall img,
  .photo-strip .photo-card img,
  .team-photo-grid .photo-card img,
  .volunteer-feature .photo-card img,
  .story-photo-grid .photo-card:first-child img,
  .story-photo-grid .photo-card:not(:first-child) img,
  .photo-tile,
  .photo-tile.wide,
  .photo-tile.tall{
    height:250px;
  }
  .hero-card .photo-card img,
  .photo-card.hero-photo img{
    height:300px;
  }
}

/* Version 22: Page 1 outreach collage refinement.
   Eight authentic group moments, balanced equally so every photograph tells a story. */
.outreach-collage{
  grid-template-columns:repeat(4,1fr) !important;
  gap:1.25rem !important;
  align-items:stretch;
}
.outreach-collage .photo-tile{
  grid-column:auto !important;
  grid-row:auto !important;
  height:clamp(210px, 20vw, 285px) !important;
  min-height:0 !important;
  border-radius:20px;
  box-shadow:0 14px 38px rgba(7,27,58,.10);
}
.outreach-collage .photo-tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
.outreach-collage .tile-caption{
  background:rgba(7,27,58,.86);
}
@media(max-width:980px){
  .outreach-collage{
    grid-template-columns:repeat(2,1fr) !important;
  }
  .outreach-collage .photo-tile{
    height:260px !important;
  }
}
@media(max-width:620px){
  .outreach-collage{
    grid-template-columns:1fr !important;
  }
  .outreach-collage .photo-tile{
    height:250px !important;
  }
}

/* Version 23: Page 1 service collage replacement. Preserve servers and outreach context without changing the grid. */
.page1-service-collage .photo-card.preserve-context img{
  object-fit:contain;
  object-position:center center;
  background:#f7f1e7;
  padding:0;
}
@media(max-width:980px){
  .page1-service-collage .photo-card.preserve-context img{
    height:auto;
    max-height:none;
  }
}

/* Version 25: targeted Contact page photo replacement. Preserve FFF team and booth branding. */
.contact-photo-preserve img{
  object-fit:contain;
  object-position:center center;
  background:#f7f1e7;
}

/* Social media contact links */
.social-links{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;margin:1rem 0}
.social-link{display:inline-flex;align-items:center;gap:.55rem;border:1px solid var(--line);border-radius:999px;padding:.65rem .9rem;background:#fff;color:var(--navy);font-weight:900;box-shadow:0 8px 22px rgba(7,27,58,.06)}
.social-link img{width:26px;height:26px;display:block;flex:0 0 auto}
.footer .social-links{margin-top:.8rem}
.footer .social-link{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff;box-shadow:none}
.footer .social-link span{color:#fff}
@media(max-width:980px){.social-link{padding:.6rem .8rem}.social-link img{width:24px;height:24px}}

/* Contact page alignment refinement: center the logo details as one cohesive block. */
.contact-info-block{text-align:center}
.contact-info-block .page-logo-feature{margin-left:auto;margin-right:auto}
.contact-info-block .social-links{justify-content:center}

/* Home page mission card icon refinement */
.mission-icon svg{width:30px;height:30px;display:block}
.mission-icon svg *{stroke:var(--navy);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
/* Facebook button refinement */
.fb-btn-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.15em;
  height:1.15em;
  margin-right:.5em;
  border-radius:50%;
  background:#fff;
  color:#1877F2;
  font-family:Arial, Helvetica, sans-serif;
  font-weight:700;
  line-height:1;
}
a.btn:has(.fb-btn-icon){
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
/* About page hero subtitle refinement */
.page-hero .about-hero-subtitle{
  max-width:980px;
  margin-left:auto;
  margin-right:auto;
  white-space:nowrap;
}
@media (max-width:980px){
  .page-hero .about-hero-subtitle{
    white-space:normal;
    max-width:760px;
  }
}
/* Responsive local video for About page purpose section */
.local-video-card{
  min-height:0;
  padding:0;
  overflow:hidden;
  display:block;
  background:#07172c;
  border-radius:18px;
  box-shadow:0 18px 45px rgba(7,23,44,.16);
}
.local-video-card video{
  width:100%;
  height:auto;
  display:block;
  border-radius:18px;
  background:#07172c;
}
/* Version 24: Mission page card alignment refinement. */
.mission-info-cards .card {
  text-align: center;
}
.mission-info-cards .card h3,
.mission-info-cards .card p {
  text-align: center;
}
.mission-info-cards .card .quote {
  text-align: center;
}


.footer-stay-social{justify-content:center;margin-top:18px;}
.footer-stay-social .social-link{margin-left:auto;margin-right:auto;}
/* Site-wide footer Facebook alignment: match Stay Connected contact text left edge. */
.footer-stay-social{
  justify-content:flex-start;
  margin-top:.9rem;
  margin-left:0;
}
.footer-stay-social .social-link{
  margin-left:0;
}

/* Impact page third story photo focal-point refinement */
.impact-story-focal-up { object-position: center 10%; }

/* Volunteer Spotlight section */
.volunteer-spotlight-section{background:#fff;position:relative;overflow:hidden}
.volunteer-spotlight-card{display:grid;grid-template-columns:.85fr 1.15fr;gap:1.4rem;align-items:stretch;background:linear-gradient(135deg,#fff,var(--soft));border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;box-shadow:0 14px 38px rgba(7,27,58,.10);position:relative;z-index:3}
.volunteer-spotlight-photo{min-height:330px;border-radius:18px;border:2px dashed rgba(216,173,69,.75);background:linear-gradient(135deg,rgba(7,27,58,.08),rgba(216,173,69,.18));display:grid;place-items:center;text-align:center;color:var(--navy);font-weight:900;padding:1rem}
.volunteer-spotlight-photo span{background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:999px;padding:.7rem 1rem}
.volunteer-spotlight-copy{background:#fff;border:1px solid rgba(216,173,69,.35);border-radius:18px;padding:1.6rem;display:flex;flex-direction:column;justify-content:center}
.volunteer-spotlight-copy h3{font-family:Georgia,serif;color:var(--navy);font-size:clamp(1.6rem,3vw,2.35rem);line-height:1.05;margin:0 0 .8rem}
.volunteer-spotlight-copy p{color:var(--ink);font-size:1.05rem;margin:.2rem 0 1rem}
.volunteer-spotlight-copy blockquote{margin:1rem 0 0;padding:1rem 1.1rem;border-left:4px solid var(--gold);background:#fff7df;border-radius:0 14px 14px 0;color:var(--navy);font-family:Georgia,serif;font-size:1.12rem}
@media(max-width:980px){.volunteer-spotlight-card{grid-template-columns:1fr}.volunteer-spotlight-photo{min-height:260px}}

/* Unified Volunteer recognition feature */
.heart-fff-section{background:#fff;position:relative;overflow:hidden}
.heart-fff-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;position:relative;z-index:3}
.heart-fff-card{display:flex;flex-direction:column;background:linear-gradient(135deg,#fff,var(--soft));border:1px solid var(--line);border-radius:var(--radius);padding:1rem;box-shadow:0 14px 38px rgba(7,27,58,.10)}
.heart-fff-photo{min-height:230px;border-radius:18px;border:2px dashed rgba(216,173,69,.75);background:linear-gradient(135deg,rgba(7,27,58,.08),rgba(216,173,69,.18));display:grid;place-items:center;text-align:center;color:var(--navy);font-weight:900;padding:1rem}
.heart-fff-photo span{background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:999px;padding:.7rem 1rem}
.heart-fff-logo-photo{border-style:solid;background:#fff;padding:1.25rem;min-height:230px;display:flex;align-items:center;justify-content:center}
.heart-fff-logo-image{display:block;max-width:100%;max-height:200px;width:auto;height:auto;object-fit:contain}

.heart-fff-person-photo{border-style:solid;background:#fff;padding:.55rem;min-height:230px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.heart-fff-person-image{display:block;width:100%;height:230px;border-radius:14px;object-fit:cover;object-position:55% 38%}
.heart-fff-rachel-image{object-position:52% 48%}

.heart-fff-copy{background:#fff;border:1px solid rgba(216,173,69,.35);border-radius:18px;padding:1.35rem;margin-top:1rem;display:flex;flex-direction:column;flex:1}
.heart-fff-copy h3{font-family:Georgia,serif;color:var(--navy);font-size:clamp(1.55rem,2.4vw,2.15rem);line-height:1.05;margin:0 0 .35rem}
.heart-fff-subtitle{color:var(--gold-dark);font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;margin:0 0 .85rem!important}
.heart-fff-copy p{color:var(--ink);font-size:1rem;margin:.2rem 0 1rem}
.heart-fff-copy blockquote{margin:auto 0 0;padding:1rem 1.1rem;border-left:4px solid var(--gold);background:#fff7df;border-radius:0 14px 14px 0;color:var(--navy);font-family:Georgia,serif;font-size:1.05rem}
@media(max-width:1100px){.heart-fff-grid{grid-template-columns:1fr 1fr}.heart-fff-future{grid-column:1/-1}}
@media(max-width:720px){.heart-fff-grid{grid-template-columns:1fr}.heart-fff-future{grid-column:auto}.heart-fff-photo{min-height:210px}}


/* Impact story signature styling */
.story-signature {
  margin-top: 0.85rem;
  margin-bottom: 0;
  font-family: "Great Vibes", "Allura", "Parisienne", cursive;
  font-size: clamp(1.55rem, 2.4vw, 2.05rem);
  line-height: 1.15;
  color: var(--navy);
  text-align: left;
  font-weight: 400;
}

/* Events page permanent Facebook community update feature */
.facebook-community-feature{display:block;background:#fff;border:1px solid var(--line);border-radius:32px;padding:2rem;box-shadow:var(--shadow);text-align:center;color:var(--ink);transition:transform .18s ease,box-shadow .18s ease}
.facebook-community-feature:hover{transform:translateY(-2px);box-shadow:0 22px 60px rgba(7,27,58,.18)}
.facebook-community-feature .section-title{margin:0 auto 1.5rem;max-width:860px}
.facebook-community-feature .section-title h2{color:var(--navy)}
.facebook-feature-button{display:inline-flex;align-items:center;justify-content:center;gap:.85rem;background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;border:2px solid var(--gold);border-radius:999px;padding:1rem 1.45rem;font-weight:900;letter-spacing:.04em;box-shadow:0 12px 28px rgba(7,27,58,.18)}
.facebook-feature-button img{width:38px;height:38px;display:block;filter:none}
@media(max-width:980px){.facebook-community-feature{padding:1.35rem}.facebook-feature-button{width:100%;padding:.95rem 1rem}.facebook-feature-button img{width:32px;height:32px}}

/* Events page Facebook and outreach video modernization */
.events-modern-section{align-items:stretch}
.events-modern-section .section-title{margin-bottom:1.35rem}
.events-modern-section .section-title p,.events-video-feature p{color:var(--muted);font-size:1.02rem}
.events-facebook-card{height:100%;display:flex;flex-direction:column;justify-content:center}
.events-video-feature{height:100%}
.events-video-feature h2{font-family:Georgia,serif;font-size:clamp(1.9rem,3vw,2.8rem);line-height:1.05;margin:.35rem 0;color:var(--navy)}
.events-video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.4rem}
.event-video-card{aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:linear-gradient(135deg,var(--navy),var(--navy2));border:1px solid rgba(216,173,69,.45);box-shadow:0 12px 28px rgba(7,27,58,.12)}
.event-video-placeholder{width:100%;height:100%;display:grid;place-items:center;text-align:center;color:#fff;font-weight:900;padding:1rem;position:relative}
.event-play-button{width:52px;height:52px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--navy);font-size:1.45rem;box-shadow:0 10px 24px rgba(0,0,0,.22);margin-bottom:.6rem}
@media(max-width:980px){.events-video-grid{grid-template-columns:1fr}.events-facebook-card{min-height:auto}.events-video-feature h2{font-size:2rem}}

/* Events page center video placement */
.event-video-card{aspect-ratio:auto;background:transparent;border:0;box-shadow:none;overflow:visible;display:flex;flex-direction:column;gap:.65rem}
.event-video-media{aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:linear-gradient(135deg,var(--navy),var(--navy2));border:1px solid rgba(216,173,69,.45);box-shadow:0 12px 28px rgba(7,27,58,.12)}
.event-video-media video{width:100%;height:100%;display:block;object-fit:contain;background:#071b3a;border:0}
.event-video-caption{margin:0;text-align:center;color:var(--navy);font-weight:800;font-size:.95rem;line-height:1.35}
.event-video-placeholder{height:auto}
@media(max-width:980px){.event-video-caption{text-align:center}}

/* Events page YouTube feature gallery */
.events-video-gallery{display:grid;gap:1.2rem;margin-top:1.4rem}
.youtube-feature-card{display:block;border:1px solid rgba(216,173,69,.5);border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 12px 28px rgba(7,27,58,.12);color:var(--ink);transition:transform .18s ease,box-shadow .18s ease}
.youtube-feature-card:hover{transform:translateY(-2px);box-shadow:0 20px 45px rgba(7,27,58,.16)}
.youtube-card-visual{aspect-ratio:16/9;background:linear-gradient(135deg,var(--navy),var(--navy2));display:grid;place-items:center;position:relative;color:#fff}
.youtube-brand{position:absolute;top:1rem;left:1rem;display:inline-flex;align-items:center;gap:.45rem;font-weight:900;letter-spacing:.02em;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:.45rem .7rem}
.youtube-icon{display:inline-grid;place-items:center;width:30px;height:22px;border-radius:6px;background:#e62117;color:#fff;font-size:.75rem;line-height:1}
.youtube-play-button{display:grid;place-items:center;width:82px;height:82px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--navy);font-size:2rem;box-shadow:0 14px 34px rgba(0,0,0,.28);padding-left:.2rem}
.youtube-card-content{padding:1.25rem}
.youtube-card-content h3{font-family:Georgia,serif;color:var(--navy);font-size:clamp(1.35rem,2.4vw,2.1rem);line-height:1.05;margin:0 0 .55rem}
.youtube-card-content p{margin:0 0 1rem;color:var(--muted);font-size:1rem}
.youtube-watch-button{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:.8rem 1.05rem;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#0a1c39;font-weight:900;box-shadow:0 10px 24px rgba(216,173,69,.24)}
.youtube-watch-button.disabled{background:#eef1f5;color:var(--muted);box-shadow:none}
.youtube-feature-primary .youtube-card-visual{min-height:260px}
.future-video-grid{grid-template-columns:repeat(2,1fr)}
.youtube-future-card .youtube-play-button{width:58px;height:58px;font-size:1.35rem}
.youtube-future-card .youtube-card-content h3{font-size:1.25rem}
.future-placeholder{pointer-events:none}
@media(max-width:980px){.future-video-grid{grid-template-columns:1fr}.youtube-feature-primary .youtube-card-visual{min-height:auto}.youtube-play-button{width:66px;height:66px;font-size:1.6rem}.youtube-brand{top:.75rem;left:.75rem}}

/* Events page embedded outreach video cards */
.events-embed-card{display:flex;flex-direction:column;border:1px solid rgba(216,173,69,.5);border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 12px 28px rgba(7,27,58,.12)}
.events-embed-media{aspect-ratio:16/9;background:linear-gradient(135deg,var(--navy),var(--navy2));overflow:hidden}
.events-embed-media iframe{width:100%;height:100%;display:block;border:0}
.events-embed-content{padding:1.05rem 1.1rem 1.2rem}
.events-embed-content h3{font-family:Georgia,serif;color:var(--navy);font-size:clamp(1.15rem,2vw,1.55rem);line-height:1.1;margin:0 0 .5rem}
.events-embed-content p{margin:0;color:var(--muted);font-size:.96rem;line-height:1.55}

/* About page YouTube feature card */
.about-youtube-feature-card{
  display:block;
  border:1px solid rgba(216,173,69,.5);
  border-radius:26px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 12px 28px rgba(7,27,58,.12);
  color:var(--ink);
  transition:transform .18s ease,box-shadow .18s ease;
}
.about-youtube-feature-card:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 45px rgba(7,27,58,.16);
}
.about-youtube-thumb{
  position:relative;
  aspect-ratio:16/9;
  background:linear-gradient(135deg,var(--navy),var(--navy2));
  display:grid;
  place-items:center;
  overflow:hidden;
}
.about-youtube-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.72;
}
.about-youtube-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(7,27,58,.45),rgba(216,173,69,.18));
}
.about-youtube-brand{
  position:absolute;
  top:1rem;
  left:1rem;
  z-index:4;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-weight:900;
  letter-spacing:.02em;
  color:#fff;
  background:rgba(7,27,58,.65);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:.45rem .7rem;
}
.about-youtube-thumb .youtube-play-button{
  position:absolute;
  z-index:4;
}
.about-youtube-content{
  padding:1.25rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.about-youtube-content h3{
  font-family:Georgia,serif;
  color:var(--navy);
  margin:0;
  font-size:clamp(1.35rem,2.4vw,2rem);
  line-height:1.05;
}
@media(max-width:980px){
  .about-youtube-content{display:block}
  .about-youtube-content .youtube-watch-button{margin-top:1rem}
}