/* CoffeeVietnam UI refinement — 2026-09-15
   Fixes visual gaps caused by parallax media movement and reduces oversized
   editorial section headings for a tighter international layout. */

/* 1) IMAGE / CONTENT CONTINUITY — no exposed background seams */
.cv-origin-story,
.cv-origin-story__stage,
.story,
.story-image,
.story-copy{
  margin-top:0!important;
  margin-bottom:0!important;
}

.cv-origin-story{
  overflow:hidden;
}

.cv-origin-story__stage,
.story{
  gap:0!important;
  align-items:stretch!important;
  overflow:hidden!important;
}

.cv-origin-story__visual,
.story-image{
  position:relative;
  overflow:hidden!important;
  background:#10241d;
  min-height:100%;
  isolation:isolate;
}

/* Parallax images are intentionally oversized so translateY can never reveal
   a cream/white strip at the top or bottom of the media panel. */
.cv-origin-story__visual > img.cv-parallax,
.story-image > img.parallax,
.story-image > img{
  position:absolute!important;
  inset:-7% 0!important;
  width:100%!important;
  height:114%!important;
  max-width:none!important;
  object-fit:cover!important;
  margin:0!important;
  display:block!important;
  will-change:transform;
}

.cv-origin-story__overlay,
.story-image:after{
  position:absolute;
  inset:0;
}

.cv-origin-story__copy,
.story-copy{
  min-height:100%;
  align-self:stretch;
  justify-content:center!important;
  margin:0!important;
  background:#fbf8f2;
  border-left:1px solid rgba(20,39,30,.08);
}

/* Keep adjacent editorial modules visually locked together. */
.cv-origin-story + .cv-products,
.story + .section,
.story + section{
  margin-top:0!important;
}

/* 2) EDITORIAL HEADING SCALE — approximately 50% smaller than previous */
.cv-products__head h2,
.cv-b2b__head h2,
.cv-capabilities__intro h2,
.cv-journal__head h2,
.cv-origin-story__copy h2,
.cv-manifesto__title,
.section-head h2,
.center-head h2,
.center h2,
.story-copy > div h2,
.cap-grid > div:first-child h2,
.final h2{
  font-size:clamp(28px,3.2vw,50px)!important;
  line-height:.98!important;
  letter-spacing:-.028em!important;
  text-wrap:balance;
}

/* Keep the portfolio layout elegant after heading reduction. */
.cv-products__head,
.cv-b2b__head,
.cv-journal__head,
.section-head{
  align-items:end;
  gap:clamp(28px,5vw,76px)!important;
}

.cv-products__head h2,
.cv-b2b__head h2,
.cv-journal__head h2{
  max-width:16ch;
}

/* Secondary editorial headings reduced proportionally without hurting hierarchy. */
.cv-origin-step h3,
.step h3,
.cv-capability h3,
.cap-list h3,
.cv-story h3,
.journal h3{
  font-size:clamp(22px,2.2vw,34px)!important;
  line-height:1.02!important;
}

/* 3) MOBILE NAVIGATION — guarantee full-viewport menu visibility.
   The header is translated while scrolling. A transformed ancestor changes the
   containing block for a fixed child, which can collapse the mobile panel into
   the header height. Remove that transform while the menu is open. */
@media(max-width:1120px){
  .menu-btn{
    display:flex!important;
    position:relative;
    z-index:5200;
    flex:0 0 auto;
  }

  body.menu-open .site-header{
    transform:none!important;
    overflow:visible!important;
  }

  .mobile-panel{
    display:none!important;
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    max-width:none!important;
    height:100dvh!important;
    min-height:100svh!important;
    margin:0!important;
    padding:18px 22px max(28px,env(safe-area-inset-bottom))!important;
    background:#10251e!important;
    color:#fff!important;
    z-index:5000!important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    flex-direction:column!important;
  }

  .mobile-panel.open{
    display:flex!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  .mobile-menu-head{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    flex:0 0 auto;
    position:relative;
    z-index:2;
  }

  .mobile-panel .brand,
  .mobile-menu-list>a,
  .mobile-menu-sub a,
  .mobile-menu-meta,
  .mobile-panel .btn{
    color:#fff!important;
    opacity:1;
  }

  .mobile-menu-list{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    flex:0 0 auto;
  }

  .mobile-menu-list>a{
    display:block!important;
    visibility:visible!important;
  }

  .mobile-menu-sub{
    display:grid!important;
    width:100%!important;
  }

  .mobile-menu-actions{
    display:grid!important;
    width:100%!important;
  }

  .menu-close{
    display:grid!important;
    place-items:center;
    flex:0 0 46px;
    position:relative;
    z-index:3;
  }
}

@media(max-width:800px){
  .cv-origin-story__stage,
  .story{
    grid-template-columns:1fr!important;
  }

  .cv-origin-story__visual,
  .story-image{
    min-height:58svh!important;
    height:58svh!important;
  }

  .cv-origin-story__visual > img.cv-parallax,
  .story-image > img.parallax,
  .story-image > img{
    inset:-5% 0!important;
    height:110%!important;
  }

  .cv-origin-story__copy,
  .story-copy{
    border-left:0;
    border-top:1px solid rgba(20,39,30,.08);
    padding-top:clamp(44px,9vw,70px)!important;
    padding-bottom:clamp(44px,9vw,70px)!important;
  }

  .cv-products__head h2,
  .cv-b2b__head h2,
  .cv-capabilities__intro h2,
  .cv-journal__head h2,
  .cv-origin-story__copy h2,
  .cv-manifesto__title,
  .section-head h2,
  .center-head h2,
  .center h2,
  .story-copy > div h2,
  .cap-grid > div:first-child h2,
  .final h2{
    font-size:clamp(28px,8.6vw,42px)!important;
  }
}

@media(max-width:520px){
  .cv-products__head,
  .cv-b2b__head,
  .cv-journal__head,
  .section-head{
    gap:18px!important;
  }

  .mobile-panel{
    padding-left:18px!important;
    padding-right:18px!important;
  }

  .mobile-menu-list>a{
    font-size:clamp(31px,10vw,43px)!important;
    line-height:1.02!important;
    padding:9px 0!important;
  }

  .mobile-menu-sub{
    grid-template-columns:1fr 1fr!important;
    gap:10px 14px!important;
  }
}

@media(max-width:390px){
  .mobile-menu-sub{
    grid-template-columns:1fr!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .cv-origin-story__visual > img.cv-parallax,
  .story-image > img.parallax{
    transform:none!important;
  }
}

/* 4) GLOBAL DISPLAY SCALE + FOOTER MEDIA SEAM */
.cv-footer-top{
  overflow:hidden!important;
}
.cv-footer-top__media{
  inset:0!important;
}
.cv-footer-top__media img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
.cv-footer-top__veil{
  inset:0!important;
}
.cv-footer-main{
  position:relative;
  z-index:2;
  background:#0d1d17;
}

/* Large display typography is intentionally restrained to ~50% of the
   previous scale while preserving the editorial serif hierarchy. */
.page-hero h1{
  font-size:clamp(34px,4.2vw,58px)!important;
  line-height:.98!important;
  letter-spacing:-.035em!important;
  max-width:18ch;
  text-wrap:balance;
}
.hero h1,
.cv-hero h1{
  font-size:clamp(40px,5.2vw,78px)!important;
  line-height:.93!important;
  letter-spacing:-.04em!important;
}
.cv-duo__content h2{
  font-size:clamp(36px,4.2vw,62px)!important;
  line-height:.94!important;
}
.world-copy h2,
.final-inner h2,
.cv-final__inner h2{
  font-size:clamp(30px,3.4vw,50px)!important;
  line-height:.98!important;
}
.cv-footer-top h2{
  font-size:clamp(30px,3.15vw,46px)!important;
  line-height:.98!important;
  letter-spacing:-.025em!important;
  max-width:18ch!important;
}

@media(max-width:760px){
  .page-hero h1{
    font-size:clamp(32px,10vw,46px)!important;
    line-height:1!important;
  }
  .hero h1,
  .cv-hero h1{
    font-size:clamp(38px,12vw,56px)!important;
    line-height:.94!important;
  }
  .cv-duo__content h2,
  .world-copy h2,
  .final-inner h2,
  .cv-final__inner h2,
  .cv-footer-top h2{
    font-size:clamp(30px,9.6vw,44px)!important;
    line-height:.98!important;
  }
}

/* 5) HOMEPAGE HERO — centered vertical editorial stack */
body .cv-home .cv-hero__inner{
  width:min(calc(100% - 72px),1180px)!important;
  grid-template-columns:1fr!important;
  gap:clamp(30px,4vw,52px)!important;
  align-items:center!important;
  justify-items:center!important;
  align-content:center!important;
  padding:clamp(150px,18vh,210px) 0 118px!important;
  text-align:center!important;
}
body .cv-home .cv-hero__inner>div:first-child{
  width:100%!important;
  text-align:center!important;
}
body .cv-home .cv-hero__kicker{
  justify-content:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body .cv-home .cv-hero h1{
  max-width:12ch!important;
  margin:0 auto!important;
  text-align:center!important;
}
body .cv-home .cv-hero h1 em{
  margin-left:0!important;
}
body .cv-home .cv-hero__aside{
  width:100%!important;
  max-width:760px!important;
  justify-self:center!important;
  padding:0!important;
  text-align:center!important;
}
body .cv-home .cv-hero__aside p{
  max-width:680px!important;
  margin:0 auto!important;
}
body .cv-home .cv-hero__actions{
  justify-content:center!important;
}

/* 6) FOOTER — true full-bleed, uniform forest background */
body [data-site-footer]{
  display:block!important;
  position:relative!important;
  left:50%!important;
  width:100vw!important;
  max-width:none!important;
  margin-left:-50vw!important;
  margin-right:0!important;
  background:#0d1d17!important;
  overflow:hidden!important;
}
body [data-site-footer] .cv-footer-shell{
  width:100vw!important;
  max-width:none!important;
  margin:0!important;
  background:#0d1d17!important;
}
body [data-site-footer] .cv-footer-shell:before{
  display:none!important;
  content:none!important;
}
body [data-site-footer] .cv-footer-main{
  background:#0d1d17!important;
}

@media(max-width:760px){
  body .cv-home .cv-hero__inner{
    width:calc(100% - 36px)!important;
    padding:132px 0 104px!important;
    gap:28px!important;
  }
  body .cv-home .cv-hero__aside{
    max-width:560px!important;
  }
}