*{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;
}


/* =========================================================
   BossSeBachao consolidated update — 21 Aug 2026
   ========================================================= */

header{
  padding-left:5.5%;
  padding-right:5.5%;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:1.65rem;
  line-height:1;
  white-space:nowrap;
}
.brand-logo{
  width:40px;
  height:40px;
  object-fit:contain;
  border-radius:6px;
  flex:0 0 auto;
}
nav{gap:18px}
nav a{font-size:.88rem;white-space:nowrap}

.hero{
  min-height:calc(100vh - 70px);
  padding-top:48px;
  padding-bottom:48px;
  gap:54px;
}
.hero h1{
  font-size:clamp(2.8rem,4.45vw,4.55rem);
  line-height:1.04;
  margin-top:18px;
  margin-bottom:22px;
}
.hero-eyebrow{
  font-size:1.02rem;
  letter-spacing:.10em;
  text-transform:none;
  margin-bottom:8px;
}
.hero .lead{
  font-size:1.12rem;
  line-height:1.6;
}
.hero p{line-height:1.62}
.hero .portrait img{max-width:390px}
.hero-quote{
  display:flex;
  flex-direction:column;
  gap:4px;
  max-width:310px !important;
  font-size:1rem;
  line-height:1.35;
}
.hero-quote span:last-child{color:#b78700}

#about,#founder,#videos,#why,#mission,#connect{scroll-margin-top:82px}

.video-thumb{
  width:100%;
  height:auto !important;
  aspect-ratio:16 / 9;
  display:block;
  position:relative;
  overflow:hidden;
  background:#0b1730;
}
.video-thumb img{
  width:100%;
  height:100%;
  object-fit:contain !important;
  object-position:center center;
  display:block;
}

.missioncard p:last-child{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
}
.missioncard h2{
  overflow-wrap:normal;
  word-break:normal;
}

.final h2{max-width:1000px}

@media(max-width:1120px){
  header{padding-left:4%;padding-right:4%}
  .brand{font-size:1.45rem}
  .brand-logo{width:36px;height:36px}
  nav{gap:12px}
  nav a{font-size:.82rem}
  .hero{gap:38px}
  .hero h1{font-size:clamp(2.65rem,4.7vw,4rem)}
}

@media(max-width:900px){
  .brand{font-size:1.3rem}
  .brand-logo{width:34px;height:34px}
  .hero{
    min-height:auto;
    padding-top:58px;
    padding-bottom:70px;
  }
  .hero h1{font-size:clamp(2.5rem,10vw,3.35rem)}
  .hero-eyebrow{font-size:.9rem}
  .hero .portrait img{max-width:410px}
  .video-thumb{aspect-ratio:16 / 9}
}


/* =========================================================
   BossSeBachao layout correction v2 — 21 Aug 2026
   Fixes desktop fit, mobile header/menu, logo placement,
   About/Founder fit, and YouTube thumbnail rendering.
   ========================================================= */

/* ---------- Header / Brand ---------- */
header{
  height:82px;
  padding:0 5.5%;
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:1.72rem;
  line-height:1;
}
.brand-logo{
  width:62px;
  height:62px;
  object-fit:contain;
  border-radius:8px;
}
nav{
  gap:16px;
}
nav a{
  font-size:.86rem;
}

/* ---------- Hero / first screen ---------- */
.hero{
  min-height:calc(100vh - 82px);
  padding:38px 7%;
  gap:42px;
}
.hero h1{
  font-size:clamp(2.7rem,4.05vw,4.2rem);
  line-height:1.03;
  margin:14px 0 18px;
}
.hero-eyebrow{
  font-size:1.05rem;
  margin-bottom:4px;
}
.hero .lead{
  font-size:1.08rem;
  line-height:1.52;
}
.hero p{
  line-height:1.55;
}
.hero .portrait img{
  max-width:355px;
}
.hero-quote{
  font-size:.98rem;
}

/* ---------- About screen: all 4 cards fit better on desktop ---------- */
#about{
  padding:42px 7% 46px;
  min-height:calc(100vh - 82px);
}
#about h2{
  font-size:clamp(2.35rem,3.1vw,3.15rem);
  line-height:1.08;
  margin-bottom:20px;
}
#about .wide{
  max-width:1100px;
  font-size:1rem;
  line-height:1.55;
  margin-bottom:24px;
}
#about .pillars{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-top:24px;
}
#about .pillars article{
  min-height:165px;
  padding:22px;
}
#about .pillars h3{
  font-size:1.08rem;
}
#about .pillars p{
  font-size:.93rem;
  line-height:1.45;
}

/* ---------- Founder screen: compact enough for 100% browser zoom ---------- */
#founder{
  min-height:calc(100vh - 82px);
  padding:44px 7%;
  grid-template-columns:.62fr 1.38fr;
  gap:48px;
}
#founder .large img{
  max-width:325px;
}
#founder h2{
  font-size:clamp(2.35rem,3vw,3.15rem);
  margin-bottom:14px;
}
#founder .eyebrow{
  margin-bottom:10px;
}
#founder .role{
  margin-bottom:16px;
}
#founder p{
  font-size:1rem;
  line-height:1.52;
  margin-bottom:12px;
}
#founder blockquote{
  margin-top:18px;
  padding:16px 18px;
  font-size:1.02rem;
}

/* ---------- Video section ---------- */
#videos{
  padding-top:52px;
}
#videos h2{
  font-size:clamp(2.4rem,3.2vw,3.25rem);
}
.video-thumb{
  aspect-ratio:16 / 9;
  height:auto !important;
  background:#0b1730;
}
.video-thumb img{
  width:100%;
  height:100%;
  object-fit:cover !important;
  object-position:center center;
  display:block;
}
.play-overlay{
  width:56px;
  height:56px;
  font-size:1.65rem;
}

/* ---------- Mission & Vision ---------- */
.missioncard p:last-child{
  text-align:justify;
  text-justify:inter-word;
}

/* ---------- Sticky anchor offsets ---------- */
#about,#founder,#videos,#why,#mission,#connect{
  scroll-margin-top:94px;
}

/* ---------- Medium desktop ---------- */
@media(max-width:1200px){
  header{
    padding-left:4%;
    padding-right:4%;
  }
  .brand{
    font-size:1.5rem;
    gap:10px;
  }
  .brand-logo{
    width:54px;
    height:54px;
  }
  nav{
    gap:11px;
  }
  nav a{
    font-size:.79rem;
  }
  #about .pillars{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #about{
    min-height:auto;
  }
}

/* ---------- Mobile / tablet ---------- */
@media(max-width:900px){
  header{
    height:60px;
    padding:0 5%;
  }
  .brand{
    font-size:1.08rem;
    gap:7px;
  }
  .brand-logo{
    width:30px;
    height:30px;
    border-radius:5px;
  }
  #menu{
    display:block;
    font-size:1.8rem;
    line-height:1;
    padding:4px 0 4px 12px;
    color:#fff;
    z-index:30;
  }
  nav{
    display:none;
  }
  /* FileZilla site's existing JS writes inline styles when menu opens.
     These rules keep that opened menu usable on small screens. */
  header nav[style*="display: flex"]{
    top:60px !important;
    z-index:25;
    max-height:calc(100vh - 60px);
    overflow-y:auto;
    padding:16px 6% !important;
    gap:0 !important;
    box-shadow:0 12px 30px rgba(0,0,0,.25);
  }
  header nav[style*="display: flex"] a{
    display:block;
    width:100%;
    padding:12px 0;
    font-size:1rem;
    border-bottom:1px solid rgba(255,255,255,.12);
  }

  .hero{
    min-height:auto;
    padding:34px 6% 50px;
    grid-template-columns:1fr;
    gap:28px;
  }
  .hero h1{
    font-size:clamp(2.25rem,10vw,3rem);
    line-height:1.03;
    margin:12px 0 18px;
  }
  .hero-eyebrow{
    font-size:.92rem;
  }
  .hero .lead{
    font-size:1rem;
  }
  .hero .portrait{
    align-items:center;
  }
  .hero .portrait img{
    width:min(82vw,340px);
    max-width:340px;
  }
  .hero .portrait blockquote{
    position:static;
    margin:16px auto 0;
    width:min(82vw,320px);
    max-width:320px !important;
    text-align:center;
  }

  #about,#founder{
    min-height:auto;
    padding:54px 6%;
  }
  #about h2,#founder h2{
    font-size:2.25rem;
  }
  #about .pillars{
    grid-template-columns:1fr;
  }
  #founder{
    grid-template-columns:1fr;
    gap:30px;
  }
  #founder .portrait{
    display:flex;
    justify-content:center;
  }
  #founder .large img{
    max-width:320px;
  }

  .video-thumb{
    aspect-ratio:16 / 9;
  }

  #about,#founder,#videos,#why,#mission,#connect{
    scroll-margin-top:70px;
  }
}

/* Very small phones */
@media(max-width:420px){
  .brand{
    font-size:1rem;
  }
  .brand-logo{
    width:28px;
    height:28px;
  }
  .hero h1{
    font-size:2.15rem;
  }
}


/* =========================================================
   BossSeBachao v3 — video 3x3 desktop grid + mobile header fix
   ========================================================= */

/* ---------- Video grid: compact 3 columns, up to 9 visible ---------- */
.videos{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:18px !important;
  margin:28px 0 34px !important;
}
.video-card{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  grid-column:auto !important;
}
.video-card:last-child{
  grid-column:auto !important;
  max-width:none !important;
  justify-self:stretch !important;
}
.video-thumb{
  aspect-ratio:16 / 9 !important;
  height:auto !important;
  background:#0b1730 !important;
}
.video-thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:#0b1730 !important;
}
.video-body{
  padding:14px 16px 16px !important;
}
.video-body h3{
  font-size:.94rem !important;
  line-height:1.28 !important;
  margin:0 0 10px !important;
}
.video-body span{
  font-size:.82rem !important;
}
.play-overlay{
  width:46px !important;
  height:46px !important;
  font-size:1.35rem !important;
}
#videos{
  padding-top:44px !important;
  padding-bottom:56px !important;
}
#videos h2{
  font-size:clamp(2.2rem,2.8vw,3rem) !important;
  margin-bottom:14px !important;
}
#videos>p{
  margin-bottom:8px !important;
}

/* ---------- Strong mobile header reset ---------- */
@media(max-width:900px){
  header{
    height:58px !important;
    min-height:58px !important;
    padding:0 14px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    overflow:visible !important;
  }

  .brand{
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    font-size:1.02rem !important;
    line-height:1 !important;
    max-width:72% !important;
    overflow:hidden !important;
    white-space:nowrap !important;
  }

  .brand span{
    display:block !important;
    white-space:nowrap !important;
  }

  .brand-logo{
    width:26px !important;
    height:26px !important;
    max-width:26px !important;
    max-height:26px !important;
    min-width:26px !important;
    min-height:26px !important;
    object-fit:contain !important;
    flex:0 0 26px !important;
    border-radius:4px !important;
  }

  #menu{
    display:flex !important;
    align-items:center !important;
    gap:5px !important;
    background:transparent !important;
    border:0 !important;
    color:#fff !important;
    padding:6px 2px 6px 8px !important;
    margin:0 !important;
    font-size:1rem !important;
    line-height:1 !important;
    cursor:pointer !important;
    z-index:50 !important;
  }
  .menu-icon{
    font-size:1.45rem !important;
    line-height:1 !important;
  }
  .menu-text{
    display:inline-block !important;
    font-size:.9rem !important;
    font-weight:700 !important;
  }

  nav{
    display:none !important;
  }

  /* Existing JS adds inline display:flex/position styles. Override safely. */
  header nav[style*="display: flex"]{
    display:flex !important;
    position:absolute !important;
    top:58px !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    background:#0b1730 !important;
    flex-direction:column !important;
    padding:10px 18px 14px !important;
    gap:0 !important;
    z-index:45 !important;
    max-height:calc(100vh - 58px) !important;
    overflow-y:auto !important;
    box-shadow:0 12px 28px rgba(0,0,0,.28) !important;
  }
  header nav[style*="display: flex"] a{
    display:block !important;
    width:100% !important;
    padding:12px 0 !important;
    color:#fff !important;
    font-size:1rem !important;
    border-bottom:1px solid rgba(255,255,255,.12) !important;
  }

  .hero{
    padding-top:30px !important;
  }

  /* Mobile video list remains single column and full thumbnail */
  .videos{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }
  .video-body{
    padding:16px 18px 18px !important;
  }
  .video-body h3{
    font-size:1rem !important;
  }
}

/* 3x2 on medium screens */
@media(min-width:901px) and (max-width:1180px){
  .videos{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  .video-body h3{
    font-size:.9rem !important;
  }
}


/* =========================================================
   BossSeBachao v4 — compact 9-video desktop screen
   ========================================================= */

/* Wide desktop: make all 9 cards practical to view together */
@media(min-width:1181px){
  #videos{
    padding:24px 5.5% 28px !important;
  }
  #videos .eyebrow{
    margin-bottom:6px !important;
    font-size:.78rem !important;
  }
  #videos h2{
    font-size:2.25rem !important;
    line-height:1.05 !important;
    margin:0 0 8px !important;
  }
  #videos > p{
    font-size:.92rem !important;
    line-height:1.35 !important;
    margin:0 0 16px !important;
  }
  .videos{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px 14px !important;
    margin:0 !important;
  }
  .video-card{
    display:grid !important;
    grid-template-columns:44% 56% !important;
    min-height:0 !important;
    height:128px !important;
    overflow:hidden !important;
  }
  .video-thumb{
    width:100% !important;
    height:128px !important;
    aspect-ratio:auto !important;
    border-radius:0 !important;
  }
  .video-thumb img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    background:#0b1730 !important;
  }
  .video-body{
    min-width:0 !important;
    padding:11px 12px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
  }
  .video-body h3{
    font-size:.82rem !important;
    line-height:1.2 !important;
    margin:0 0 8px !important;
    display:-webkit-box !important;
    -webkit-line-clamp:3 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }
  .video-body span{
    font-size:.72rem !important;
  }
  .play-overlay{
    width:38px !important;
    height:38px !important;
    font-size:1.05rem !important;
  }
}

/* Keep conventional cards on laptop widths, but tighter than before */
@media(min-width:901px) and (max-width:1180px){
  #videos{
    padding-top:30px !important;
  }
  .videos{
    gap:12px !important;
  }
  .video-body{
    padding:10px 12px 12px !important;
  }
  .video-body h3{
    font-size:.82rem !important;
  }
}


/* =========================================================
   Disclaimer screen fit — desktop only
   Spacing/layout only. No font-size or typography changes.
   ========================================================= */
@media(min-width:901px){

  /* Bring the Disclaimer section higher and make it shallower */
  #disclaimer{
    scroll-margin-top:82px !important;
    padding-top:26px !important;
    padding-bottom:26px !important;
  }
  #disclaimer .eyebrow{
    margin-top:0 !important;
    margin-bottom:8px !important;
  }
  #disclaimer h2{
    margin-top:0 !important;
    margin-bottom:14px !important;
  }
  #disclaimer p{
    margin-top:0 !important;
    margin-bottom:0 !important;
  }

  /* Compact the closing CTA vertically without changing its font sizes */
  .final{
    padding-top:26px !important;
    padding-bottom:26px !important;
  }
  .final .eyebrow{
    margin-top:0 !important;
    margin-bottom:6px !important;
  }
  .final h2{
    margin-top:0 !important;
    margin-bottom:10px !important;
  }
  .final p{
    margin-top:0 !important;
    margin-bottom:10px !important;
  }
  .final .buttons{
    margin-top:10px !important;
  }

  /* Compact footer so it remains visible with Disclaimer + CTA */
  .site-footer{
    min-height:104px !important;
    padding-top:16px !important;
    padding-bottom:16px !important;
    padding-right:132px !important;
  }
  .footer-copy{
    gap:10px !important;
  }
  .footer-logo{
    width:84px !important;
    height:84px !important;
    right:24px !important;
    bottom:10px !important;
  }
}


/* =========================================================
   Disclaimer final-fit — desktop only
   Minor CTA heading/spacing adjustment to expose full footer logo.
   ========================================================= */
@media(min-width:901px){
  #disclaimer + .final h2{
    font-size:clamp(2.55rem, 3.45vw, 3.65rem) !important;
    line-height:1.04 !important;
    margin-top:0 !important;
    margin-bottom:7px !important;
  }
  #disclaimer + .final{
    padding-top:20px !important;
    padding-bottom:20px !important;
  }
  #disclaimer + .final .eyebrow{
    margin-bottom:4px !important;
  }
  #disclaimer + .final p{
    margin-bottom:7px !important;
  }
  #disclaimer + .final .buttons{
    margin-top:7px !important;
  }
}


/* =========================================================
   BossSeBachao Book Launch — 28 Aug 2026
   New section only. Existing site styles remain unchanged.
   ========================================================= */

#book{
  scroll-margin-top:84px;
}

.book-launch{
  background:#0b1730;
  color:white;
  display:grid;
  grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);
  gap:54px;
  align-items:center;
  padding:30px 7% 58px;
}

.book-cover-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
}

.book-cover-wrap img{
  width:min(100%,330px);
  height:auto;
  display:block;
  object-fit:contain;
  border-radius:10px;
  box-shadow:0 18px 45px rgba(0,0,0,.35);
}

.book-copy{
  min-width:0;
}

.book-copy h2{
  margin-top:8px;
  margin-bottom:18px;
  font-size:clamp(2.3rem,3.6vw,3.7rem);
  line-height:1.04;
}

.book-copy p{
  color:#c8d0dc;
  font-size:1.05rem;
  line-height:1.65;
  max-width:880px;
}

.book-copy .book-intro{
  color:white;
  font-size:1.12rem;
}

.book-availability{
  margin-top:18px;
  color:white !important;
}

.book-market-grid{
  display:grid;
  grid-template-columns:1.5fr .75fr .75fr;
  gap:16px;
  margin-top:22px;
}

.book-market{
  background:#111f3a;
  border:1px solid #31405d;
  border-radius:14px;
  padding:16px;
}

.book-market h3{
  margin:0 0 12px;
  font-size:1.05rem;
  color:white;
}

.book-buttons{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.book-buttons .btn{
  padding:10px 14px;
  font-size:.88rem;
}

/* Keep the expanded desktop navigation comfortable with the new Book item. */
@media(min-width:901px) and (max-width:1250px){
  header{
    padding-left:3.5% !important;
    padding-right:3.5% !important;
  }
  nav{
    gap:9px !important;
  }
  nav a{
    font-size:.76rem !important;
  }
}

/* Mobile: cover above copy; book buttons remain easy to tap. */
@media(max-width:900px){
  .book-launch{
    grid-template-columns:1fr;
    gap:30px;
    padding:52px 6%;
  }

  .book-cover-wrap img{
    width:min(78vw,300px);
  }

  .book-copy h2{
    font-size:2.35rem;
  }

  .book-copy p{
    font-size:1rem;
  }

  .book-market-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .book-buttons .btn{
    flex:1 1 140px;
    text-align:center;
  }

  #book{
    scroll-margin-top:68px;
  }
}
