*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,sans-serif;color:#18202b;line-height:1.65}header{height:70px;padding:0 7%;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10;background:#0b1730;color:white}.brand{font-size:1.35rem;font-weight:800;color:white;text-decoration:none}nav{display:flex;gap:24px}nav a{color:white;text-decoration:none;font-weight:700;font-size:.9rem}#menu{display:none;background:none;border:0;color:white;font-size:1.4rem}section{padding:90px 8%}.dark{background:#0b1730;color:white}.soft{background:#f2f4f6}.eyebrow{font-weight:800;letter-spacing:.13em;color:#d2a51d;font-size:.78rem}h1,h2,h3{line-height:1.08}h1{font-size:clamp(2.8rem,5.5vw,5.3rem);letter-spacing:-.05em}h2{font-size:clamp(2.2rem,4vw,3.8rem);letter-spacing:-.04em}em{font-style:normal;color:#f5c542}.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;min-height:760px}.lead{font-size:1.2rem}.hero p{max-width:700px;color:#d3d9e3}.portrait{position:relative}.portrait img{width:100%;max-width:410px;border-radius:22px;display:block;object-fit:cover}.portrait blockquote{background:white;color:#0b1730;padding:20px;border-radius:12px;font-weight:800;position:absolute;bottom:-25px;left:-35px;max-width:300px}.buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.btn{padding:13px 21px;border-radius:8px;text-decoration:none;font-weight:800;display:inline-block}.gold{background:#f5c542;color:#0b1730}.outline{border:1px solid #8290a8;color:white}.navy{background:#0b1730;color:white}.problem p,.why>p,.connect>p,.disclaimer p{max-width:950px;color:#5f6b7a;font-size:1.08rem}.wide{max-width:1000px;color:#c5cedb}.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}.pillars article{background:#111f3a;border:1px solid #30405d;padding:27px;border-radius:15px}.pillars p{color:#bbc5d3}.whisperer{display:grid;grid-template-columns:.75fr 1.25fr;gap:70px;align-items:center}.large img{max-width:430px}.whisperer blockquote{margin:30px 0 0;padding:20px;border-left:5px solid #f5c542;background:#f4f5f7;font-weight:800}.role{font-weight:800;color:#5f6b7a}.videos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:40px 0}.video-card{background:white;border:1px solid #dce1e6;border-radius:14px;overflow:hidden;text-decoration:none;color:#18202b}.video-thumb{height:170px;background:#0b1730;display:grid;place-items:center;color:#f5c542;font-size:3.4rem}.video-body{padding:20px}.video-body h3{font-size:1.05rem}.video-body span{font-size:.85rem;color:#6a7584;font-weight:700}.center{justify-content:center;text-align:center}.whygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:35px}.whygrid article{background:#f4f5f7;padding:28px;border-radius:14px}.mission{display:grid;grid-template-columns:1fr 1fr;gap:25px}.missioncard{background:#111f3a;border:1px solid #31405d;padding:40px;border-radius:18px}.missioncard>span{font-size:2rem}.missioncard h2{font-size:2.2rem}.missioncard p:last-child{color:#c4ccd8;font-size:1.05rem}.social{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:35px}.social a{padding:28px;border:1px solid #dce1e6;border-radius:14px;text-decoration:none;color:#18202b;display:flex;flex-direction:column;gap:8px}.social strong{font-size:1.3rem}.social span{color:#667180}.disclaimer{padding-top:70px;padding-bottom:70px}.disclaimer h2{font-size:2.5rem}.final{text-align:center}.final h2{max-width:900px;margin:0 auto 20px}.final p{color:#c8d0dc}footer{padding:35px 8%;background:#070f20;color:#aeb8c8;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;font-size:.8rem}footer strong{color:white}@media(max-width:900px){nav{display:none}#menu{display:block}.hero,.whisperer,.mission{grid-template-columns:1fr}.pillars{grid-template-columns:1fr 1fr}.videos{grid-template-columns:1fr 1fr}.whygrid,.social{grid-template-columns:1fr}.portrait blockquote{left:0}}@media(max-width:560px){section{padding:65px 6%}.pillars,.videos{grid-template-columns:1fr}.hero{min-height:auto}h1{font-size:2.8rem}}
/* v5 refinements: typography, card fit, portrait proportions */
body{font-size:17px}
section p{font-size:1.08rem}
.problem p,.why>p,.connect>p,.disclaimer p{font-size:1.15rem;line-height:1.75}
.wide{font-size:1.12rem;line-height:1.75}
.whisperer p{font-size:1.08rem;line-height:1.75}
.role{font-size:1.02rem}

.pillars article,.whygrid article,.missioncard,.social a,.video-card{min-width:0}
.pillars h3,.whygrid h3,.missioncard h2,.video-body h3{
  overflow-wrap:anywhere;
  word-break:normal;
}
.pillars h3{font-size:1.2rem;line-height:1.25}
.pillars p{font-size:1rem;line-height:1.6}
.whygrid h3{font-size:1.28rem}
.whygrid p{font-size:1.02rem;line-height:1.65}
.missioncard h2{font-size:clamp(1.8rem,2.5vw,2.5rem);line-height:1.12}
.missioncard p:last-child{font-size:1.1rem;line-height:1.75}
.video-body h3{font-size:1.08rem;line-height:1.35}
.video-body span{font-size:.95rem}

/* Keep supplied portrait undistorted and crop naturally */
.portrait img,.large img{
  width:100%;
  height:auto;
  aspect-ratio:auto;
  max-height:none;
  object-fit:contain;
  object-position:center center;
  border-radius:22px;
}
.hero .portrait{display:flex;flex-direction:column;align-items:center}
.hero .portrait img{max-width:410px}
.whisperer .portrait img{max-width:430px}

/* Give cards more breathing room */
.pillars{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.pillars article{padding:32px;min-height:185px}
.videos{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.video-card:last-child{grid-column:1/-1;max-width:540px;justify-self:center;width:100%}
.video-thumb{height:190px}
.video-body{padding:24px}
.whygrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.social{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}

/* Headline sizing so long lines wrap cleanly */
.problem h2,.why h2,.connect h2,.disclaimer h2{
  max-width:980px;
  font-size:clamp(2rem,3.7vw,3.5rem);
}
#about h2{max-width:900px}
#videos h2{max-width:900px}
.mission{align-items:stretch}
.missioncard{min-height:360px}

@media(max-width:900px){
  body{font-size:16px}
  .pillars,.videos,.whygrid,.social{grid-template-columns:1fr}
  .video-card:last-child{grid-column:auto;max-width:none}
  .missioncard{min-height:auto}
}

/* Final v6 change: exact BossSeBachao logo at bottom-right of footer */
.site-footer{
  position:relative;
  padding-right:190px;
  min-height:180px;
}
.footer-copy{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  justify-content:space-between;
  width:100%;
}
.footer-logo{
  position:absolute;
  right:28px;
  bottom:20px;
  width:135px;
  height:135px;
  object-fit:contain;
  border-radius:8px;
}
@media(max-width:700px){
  .site-footer{
    padding-right:8%;
    padding-bottom:180px;
  }
  .footer-logo{
    right:50%;
    transform:translateX(50%);
    bottom:24px;
    width:130px;
    height:130px;
  }
}

/* v7 YouTube thumbnail fix */
.video-thumb{
  position:relative;
  overflow:hidden;
  background:#0b1730;
  display:block;
}
.video-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.play-overlay{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:64px;
  height:64px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(11,23,48,.88);
  color:#f5c542;
  font-size:2rem;
  line-height:1;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.video-card:hover .video-thumb img{
  transform:scale(1.02);
  transition:transform .2s ease;
}
