/* BADUNG BEE FARM — MOBILE FINAL POLISH
   Designed around narrow phones first; desktop layout is untouched. */

@media (max-width: 900px){
  html{scroll-behavior:smooth;}
  body{overflow-x:hidden;}

  /* Header */
  .site-header{
    height:72px!important;
    min-height:72px!important;
    padding:0 18px!important;
    display:flex!important;
    align-items:center!important;
  }
  .brand{flex:1 1 auto!important;min-width:0!important;}
  .brand-logo{
    width:184px!important;
    max-width:calc(100vw - 88px)!important;
    max-height:48px!important;
    object-fit:contain!important;
    object-position:left center!important;
  }
  .site-header .menu{
    display:flex!important;
    flex:0 0 44px!important;
    width:44px!important;
    height:44px!important;
    margin-left:auto!important;
    border:1px solid rgba(255,255,255,.13)!important;
    background:rgba(255,255,255,.035)!important;
    color:#fff!important;
    font-size:25px!important;
    border-radius:12px!important;
  }
  .mobile-nav{
    top:72px!important;
    padding:10px 18px 18px!important;
    background:#101a12!important;
    border-top:1px solid rgba(255,255,255,.07)!important;
  }
  .mobile-nav a{
    min-height:50px!important;
    font-size:12px!important;
    letter-spacing:.03em!important;
  }

  /* Hero: tighter, clearer and less vertically wasteful on phones */
  .hero{
    margin-top:72px!important;
    height:760px!important;
    min-height:0!important;
    max-height:calc(100svh - 72px)!important;
  }
  .hero-bg{background-position:57% center!important;}
  .hero-shade{
    background:linear-gradient(180deg,rgba(7,14,9,.42) 0%,rgba(7,14,9,.57) 46%,rgba(5,12,8,.92) 100%)!important;
  }
  .hero-inner{
    left:20px!important;
    right:20px!important;
    top:10%!important;
    max-width:370px!important;
  }
  .hero-label{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    font-size:8px!important;
    line-height:1.3!important;
    letter-spacing:.13em!important;
    margin-bottom:18px!important;
    white-space:nowrap!important;
  }
  .hero-label span{width:7px!important;height:7px!important;flex:0 0 7px!important;}
  .hero-inner h1{
    font-size:clamp(39px,10.7vw,49px)!important;
    line-height:.94!important;
    letter-spacing:-.065em!important;
    max-width:350px!important;
    margin:0!important;
  }
  .hero-inner p{
    max-width:355px!important;
    margin:18px 0 22px!important;
    font-size:13px!important;
    line-height:1.65!important;
    color:rgba(255,255,255,.76)!important;
  }
  .hero-actions{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:10px!important;
  }
  .hero-actions .btn{
    min-height:46px!important;
    width:auto!important;
    padding:13px 17px!important;
    font-size:10px!important;
    border-radius:999px!important;
  }
  .hero-actions .btn.gold{min-width:226px!important;}
  .hero-actions .btn.outline{min-width:174px!important;}
  .hero-bottom{
    left:20px!important;
    right:20px!important;
    bottom:20px!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:0!important;
    padding-top:14px!important;
    border-top:1px solid rgba(255,255,255,.18)!important;
  }
  .hero-bottom>div{
    display:flex!important;
    flex-direction:column!important;
    min-width:0!important;
  }
  .hero-bottom>div+div{
    border-left:1px solid rgba(255,255,255,.13)!important;
    padding-left:18px!important;
  }
  .hero-bottom b{font-size:23px!important;line-height:1!important;}
  .hero-bottom small{font-size:7px!important;margin-top:5px!important;letter-spacing:.1em!important;}

  /* Global phone rhythm */
  .section,.resilience,.support,.product-development,.future-pipeline,.visual-story,.journey{
    padding-left:20px!important;
    padding-right:20px!important;
  }
  .section{padding-top:64px!important;padding-bottom:64px!important;}
  .section-top{gap:18px!important;}
  .section-top h2,.product-development-head h2,.future-pipeline h2,.resilience h2,.support-main h2{
    font-size:clamp(38px,10vw,50px)!important;
    line-height:.94!important;
    letter-spacing:-.06em!important;
  }
  .section-top>p,.visual-story-head p,.product-development-head>p,.future-pipeline-copy>p,.resilience>div>p,.support-main p{
    font-size:11.5px!important;
    line-height:1.72!important;
  }
  .kicker{font-size:8px!important;letter-spacing:.14em!important;}

  /* Farm / visual story */
  .farm-feature{gap:14px!important;}
  .farm-image{min-height:245px!important;}
  .farm-panel{padding:24px 20px!important;}
  .farm-panel h3{font-size:29px!important;line-height:1!important;}
  .location-facts{grid-template-columns:1fr!important;gap:10px!important;}
  .visual-story{padding-top:64px!important;padding-bottom:64px!important;}
  .visual-story-head{gap:18px!important;margin-bottom:28px!important;}
  .visual-story-head h2{font-size:39px!important;line-height:.94!important;}
  .visual-story-grid{grid-template-columns:1fr!important;grid-template-rows:250px 175px 175px!important;gap:10px!important;}
  .story-large,.story-honey{grid-row:auto!important;grid-column:auto!important;}

  /* Statement */
  .statement{padding:64px 20px!important;}
  .statement h2{font-size:40px!important;line-height:.95!important;}

  /* Product cards */
  .product-grid{gap:12px!important;}
  .product-card{min-height:0!important;}
  .product-photo{height:185px!important;flex-basis:185px!important;}
  .product-card .product-info{min-height:175px!important;padding:20px!important;}
  .product-card .product-info h3{font-size:25px!important;margin:12px 0 7px!important;}
  .product-card .product-info p{font-size:10px!important;line-height:1.6!important;}
  .product-card .product-info>.product-link{font-size:9px!important;padding-top:11px!important;}

  /* Funding */
  .funding{gap:20px!important;margin-top:32px!important;}
  .funding-visual{min-height:400px!important;padding:24px!important;}
  .funding-number strong{font-size:34px!important;}
  .donut{width:175px!important;height:175px!important;margin:36px auto 14px!important;}
  .donut:after{width:110px!important;height:110px!important;}
  .donut b{font-size:29px!important;}
  .alloc{grid-template-columns:25px minmax(0,1fr) auto!important;gap:8px!important;padding:14px 0!important;}
  .alloc b{font-size:10.5px!important;}
  .alloc small{font-size:8px!important;line-height:1.35!important;}
  .alloc strong{font-size:9px!important;}

  /* Journey */
  .journey{padding-top:64px!important;padding-bottom:64px!important;}
  .journey-line{margin-top:32px!important;}
  .journey-line article,.journey-line article:nth-child(odd){padding:23px 0 21px 30px!important;}
  .journey-line h3{font-size:22px!important;margin:11px 0 6px!important;}
  .journey-line p{font-size:9.5px!important;line-height:1.55!important;}
  .yield{grid-template-columns:1fr auto 1fr!important;padding:20px 14px!important;gap:7px!important;}
  .yield b{font-size:23px!important;}
  .yield span{font-size:6.5px!important;}

  /* Market */
  .market{padding:58px 20px!important;}
  .market>.route-map{min-height:500px!important;height:500px!important;}
  .market>.route-map>.route-title{left:20px!important;top:20px!important;width:270px!important;}
  .market>.route-map>.route-title h2{font-size:31px!important;line-height:.95!important;}
  .market>.route-map>.map-grid{top:126px!important;bottom:36px!important;}
  .market>.route-map>svg{top:145px!important;height:300px!important;}
  .market>.route-map>.node{padding:4px 6px!important;gap:4px!important;}
  .market>.route-map>.node b{font-size:6px!important;}
  .market>.route-map>.node span{display:none!important;}
  .market>.route-map>.node.farm-node{left:14%!important;top:292px!important;}
  .market>.route-map>.node.tumu{left:27%!important;top:247px!important;}
  .market>.route-map>.node.wa{left:42%!important;top:224px!important;}
  .market>.route-map>.node.bolga{left:54%!important;top:205px!important;}
  .market>.route-map>.node.accra{left:60%!important;top:350px!important;}
  .market>.market-copy{padding:42px 0!important;}
  .market-copy h2{font-size:40px!important;line-height:.94!important;}

  /* Impact / resilience / support */
  .impact-grid{margin-top:28px!important;}
  .impact-stat,.impact-stat:not(:first-child){padding:24px 0!important;}
  .impact-stat b{font-size:58px!important;}
  .impact-stat span{font-size:19px!important;}
  .impact-copy{padding:28px 0!important;}
  .risk-grid{gap:8px!important;}
  .risk-grid>div{padding:18px 14px 20px!important;}
  .risk-grid h3{font-size:20px!important;}
  .risk-grid p{font-size:8.5px!important;}
  .support{padding-top:58px!important;padding-bottom:58px!important;}
  .support-card{gap:0!important;}
  .support-main,.support-contact{padding:25px 20px!important;}
  .support-main h2{font-size:39px!important;}
  .support-actions{gap:10px!important;}
  .support-contact strong,.support-contact a,.support-contact span{font-size:17px!important;}

  /* Footer */
  footer{
    padding:34px 20px 28px!important;
    gap:20px!important;
    text-align:center!important;
  }
  .footer-brand{gap:8px!important;width:100%!important;align-items:center!important;}
  .footer-logo{width:min(220px,82vw)!important;max-height:58px!important;object-position:center!important;}
  .footer-brand small{font-size:7px!important;letter-spacing:.1em!important;}
  footer nav{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:9px 15px!important;width:100%!important;}
  footer nav a{font-size:8px!important;}
  footer .footer-top{font-size:9px!important;}
}

@media(max-width:520px){
  .brand-logo{width:178px!important;max-width:calc(100vw - 82px)!important;}
  .hero{height:730px!important;max-height:none!important;}
  .hero-inner{top:8.5%!important;}
  .hero-inner h1{font-size:43px!important;max-width:340px!important;}
  .hero-inner p{font-size:12.5px!important;max-width:340px!important;margin-top:16px!important;}
  .hero-bottom{bottom:17px!important;}
  .hero-actions .btn{min-height:44px!important;}
  .section-top h2,.product-development-head h2,.future-pipeline h2,.resilience h2,.support-main h2{font-size:39px!important;}
  .funding-visual{min-height:390px!important;}
  .donut{width:165px!important;height:165px!important;}
  .donut:after{width:104px!important;height:104px!important;}
  .market>.route-map{min-height:480px!important;height:480px!important;}
  .market>.route-map>svg{height:285px!important;}
}

/* ================================================================
   MARKET MAP — MOBILE PRESENTATION REFINEMENT
   Keeps the map fully visible and leaves the location tooltip hidden
   until the visitor actually selects a location.
   ================================================================ */
@media (max-width:760px){
  .market{
    padding:58px 20px 54px!important;
  }

  .market>.route-map{
    height:560px!important;
    min-height:560px!important;
    padding:24px 16px 16px!important;
    display:grid!important;
    grid-template-rows:auto 385px auto!important;
    overflow:hidden!important;
  }

  .market>.route-map>.route-title{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    z-index:5!important;
  }

  .market>.route-map>.route-title .kicker{
    margin-bottom:14px!important;
  }

  .market>.route-map>.route-title h2{
    font-size:36px!important;
    line-height:.94!important;
    max-width:280px!important;
  }

  .market>.route-map>.outline-map-wrap{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:385px!important;
    min-height:385px!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
  }

  .market>.route-map>.outline-map-wrap .interactive-route-map{
    position:relative!important;
    width:306px!important;
    height:342px!important;
    max-width:306px!important;
    max-height:342px!important;
    transform:none!important;
    flex:0 0 auto!important;
    filter:drop-shadow(0 12px 24px rgba(0,0,0,.16))!important;
  }

  .market>.route-map>.map-caption{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    margin:0!important;
    text-align:left!important;
    font-size:6px!important;
    line-height:1.3!important;
    opacity:.72!important;
  }

  /* No location selected = no tooltip. JS adds .is-visible only after interaction. */
  .market>.route-map>#mapDetail{
    left:12px!important;
    right:12px!important;
    bottom:34px!important;
    top:auto!important;
    width:auto!important;
    max-width:none!important;
    height:auto!important;
    min-height:104px!important;
    max-height:126px!important;
    padding:12px 13px!important;
    overflow:hidden!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(7px)!important;
  }

  .market>.route-map>#mapDetail.is-visible{
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }

  .market>.route-map>#mapDetail .map-detail-heading{
    margin-bottom:4px!important;
  }

  .market>.route-map>#mapDetail .map-detail-copy strong{
    font-size:23px!important;
    line-height:1!important;
  }

  .market>.route-map>#mapDetail .map-detail-copy b{
    font-size:8px!important;
    margin-top:4px!important;
  }

  .market>.route-map>#mapDetail .map-detail-copy p{
    font-size:8px!important;
    line-height:1.45!important;
    margin:6px 0 0!important;
    -webkit-line-clamp:2!important;
  }
}

@media (max-width:520px){
  .market>.route-map{
    height:548px!important;
    min-height:548px!important;
    grid-template-rows:auto 374px auto!important;
  }

  .market>.route-map>.route-title h2{
    font-size:34px!important;
    max-width:270px!important;
  }

  .market>.route-map>.outline-map-wrap{
    height:374px!important;
    min-height:374px!important;
  }

  .market>.route-map>.outline-map-wrap .interactive-route-map{
    width:292px!important;
    height:326px!important;
    max-width:292px!important;
    max-height:326px!important;
  }
}