/* BADUNG BEE FARM — MODERN TYPE + MOBILE EXPERIENCE
   Final presentation layer. Loaded after all existing CSS so established
   content, imagery, map behaviour and desktop composition remain intact. */

:root{
  --modern-font:'Manrope',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

html{font-family:var(--modern-font);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;}
body,
button,
input,
textarea,
select{font-family:var(--modern-font)!important;}

/* One contemporary type system across the whole site. */
h1,h2,h3,
.hero-bottom b,
.glance-grid strong,
.farm-panel h3,
.statement-orbit span,
.product-info h3,
.funding-number strong,
.donut b,
.allocation-total b,
.journey-line h3,
.yield b,
.value-item h3,
.product-development-head h2,
.future-pipeline h2,
.future-opportunities h3,
.map-detail-copy strong,
.route-title h2,
.market-copy h2,
.impact-stat span,
.impact-copy h3,
.resilience h2,
.risk-grid h3,
.support-main h2,
.support-contact strong,
.support-contact a,
.support-contact span{
  font-family:var(--modern-font)!important;
  font-weight:800!important;
  letter-spacing:-.045em;
}

h1,h2,h3{font-variation-settings:'wght' 800;}
.hero-inner h1{letter-spacing:-.055em!important;}
.hero-bottom b,.glance-grid strong,.funding-number strong,.donut b,.yield b{font-variant-numeric:tabular-nums;}

/* Header: compact, touch-friendly and stable on small screens. */
.site-header{min-height:72px;}
.brand b{font-family:var(--modern-font)!important;font-weight:800!important;}
.brand small{font-family:var(--modern-font)!important;font-weight:600!important;}
.site-header nav a,.nav-pill,.menu{font-family:var(--modern-font)!important;font-weight:700!important;}
.menu{width:44px;height:44px;padding:0;display:none;align-items:center;justify-content:center;font-size:24px;line-height:1;cursor:pointer;border-radius:50%;}
.menu:focus-visible{outline:2px solid #e8ab2e;outline-offset:3px;}

/* Prevent horizontal drift caused by decorative map/section elements. */
html,body{max-width:100%;overflow-x:hidden;}
img,svg{max-width:100%;}

@media(max-width:900px){
  .site-header{height:68px!important;padding:0 22px!important;}
  .site-header .menu{display:flex!important;}
  .brand{gap:9px;min-width:0;}
  .bee-mark{width:32px;height:32px;flex:0 0 32px;}
  .bee-mark i{width:15px;height:2.5px;}
  .brand b{font-size:9px;letter-spacing:.12em;}
  .brand small{font-size:7px;letter-spacing:.13em;margin-top:3px;}

  .mobile-nav{
    top:68px!important;
    padding:16px 22px 20px!important;
    gap:0!important;
    border-top:1px solid rgba(255,255,255,.08);
    box-shadow:0 18px 35px rgba(0,0,0,.20);
  }
  .mobile-nav a{
    min-height:48px;
    display:flex;
    align-items:center;
    border-bottom:1px solid rgba(255,255,255,.08);
    font-size:13px!important;
    font-weight:700!important;
  }
  .mobile-nav a:last-child{border-bottom:0;}

  .hero{margin-top:68px!important;height:calc(100svh - 68px)!important;min-height:620px!important;}
  .hero-bg{background-position:center center;}
  .hero-inner{left:22px!important;right:22px!important;top:14%!important;max-width:none!important;}
  .hero-label{font-size:8px;line-height:1.4;letter-spacing:.14em;margin-bottom:18px;}
  .hero-inner h1{font-size:clamp(42px,11vw,64px)!important;line-height:.9!important;max-width:650px;}
  .hero-inner p{font-size:13px!important;line-height:1.7!important;margin:18px 0 20px!important;max-width:520px!important;}
  .hero-actions{gap:9px;flex-wrap:wrap;}
  .btn{min-height:44px;padding:12px 15px;font-size:10px;}
  .hero-bottom{left:22px!important;right:22px!important;bottom:20px!important;gap:18px!important;}
  .hero-bottom>div{min-width:0!important;}
  .hero-bottom b{font-size:20px!important;}
  .hero-bottom small{font-size:7px;}

  .section,
  .visual-story,
  .resilience,
  .support{padding-left:22px!important;padding-right:22px!important;}
  .section{padding-top:76px!important;padding-bottom:76px!important;}
  .section-top{grid-template-columns:1fr!important;gap:24px!important;}
  .section-top h2{font-size:clamp(42px,10vw,60px)!important;line-height:.92!important;}
  .section-top>p{font-size:12px!important;line-height:1.75!important;max-width:620px!important;}
  .kicker{font-size:8px!important;letter-spacing:.16em!important;margin-bottom:16px!important;}

  .farm-feature{grid-template-columns:1fr!important;margin-top:42px!important;min-height:0!important;}
  .farm-image{min-height:310px!important;}
  .image-badge{left:18px;bottom:18px;padding:11px 12px;}
  .farm-panel{padding:32px 24px!important;}
  .farm-panel h3{font-size:34px!important;line-height:.98!important;}
  .farm-panel p{font-size:12px!important;line-height:1.75!important;}
  .location-facts{margin-top:24px;padding-top:20px;gap:10px;}

  .visual-story{display:block!important;padding-top:76px!important;padding-bottom:76px!important;}
  .visual-story-head{margin-bottom:34px!important;min-height:0!important;}
  .visual-story-head h2{font-size:clamp(42px,10vw,60px)!important;line-height:.92!important;}
  .visual-story-head p{font-size:12px!important;line-height:1.75!important;margin-top:24px!important;}
  .visual-story-grid{grid-template-columns:1fr!important;grid-template-rows:300px 205px 205px!important;gap:10px!important;}
  .story-image.story-large,
  .story-image:not(.story-large),
  .story-image.story-honey{grid-column:1!important;grid-row:auto!important;}

  .statement{padding:78px 22px!important;min-height:0!important;display:block!important;}
  .statement h2{font-size:clamp(43px,10.5vw,62px)!important;line-height:.9!important;margin:18px 0 0!important;}
  .statement-orbit{display:none!important;}

  .products{padding-top:76px!important;padding-bottom:78px!important;}
  .product-grid{grid-template-columns:1fr!important;margin-top:38px!important;gap:12px!important;}
  .product-card{min-height:0!important;}
  .product-photo{height:210px!important;flex-basis:210px!important;}
  .product-info{min-height:185px!important;padding:22px!important;}
  .product-info h3{font-size:32px!important;margin:13px 0 8px!important;}
  .product-info p{font-size:11px!important;line-height:1.65!important;}
  .product-card .product-info>.product-link{font-size:9px!important;padding-top:12px!important;}
  .future .product-info{min-height:245px!important;padding:88px 22px 22px!important;}

  .funding{grid-template-columns:1fr!important;gap:28px!important;margin-top:42px!important;}
  .funding-visual{min-height:480px!important;padding:28px!important;}
  .funding-number strong{font-size:40px!important;}
  .donut{width:205px!important;height:205px!important;margin:48px auto 18px!important;}
  .donut:after{width:130px!important;height:130px!important;}
  .donut b{font-size:34px!important;}
  .funding-tip{left:28px!important;right:28px!important;bottom:24px!important;font-size:9px!important;}
  .allocation{width:100%;}
  .alloc{grid-template-columns:26px minmax(0,1fr) auto!important;gap:9px!important;padding:15px 0!important;}
  .alloc b{font-size:11px!important;}
  .alloc small{font-size:9px!important;line-height:1.4;}
  .alloc strong{font-size:10px!important;white-space:nowrap;}
  .allocation-total{padding-top:20px!important;font-size:8px!important;}
  .allocation-total b{font-size:22px!important;}

  .journey{padding-top:76px!important;padding-bottom:76px!important;}
  .journey-line{grid-template-columns:1fr!important;margin-top:44px!important;}
  .journey-line article,
  .journey-line article:nth-child(odd){min-height:0!important;padding:27px 0 24px!important;border-right:0!important;border-bottom:1px solid rgba(70,78,67,.18)!important;}
  .journey-line article:last-child{border-bottom:0!important;}
  .journey-line article>span{left:0!important;top:-14px!important;}
  .journey-line h3{font-size:24px!important;margin:13px 0 7px!important;}
  .journey-line p{font-size:10px!important;max-width:260px!important;line-height:1.6!important;}
  .yield{display:grid!important;grid-template-columns:1fr auto 1fr!important;gap:10px!important;padding:22px 16px!important;}
  .yield b{font-size:27px!important;}
  .yield i{font-size:20px!important;}
  .yield span{font-size:7px!important;}

  .product-development{padding:76px 22px!important;}
  .product-development-inner,.future-pipeline-inner{grid-template-columns:1fr!important;gap:36px!important;}
  .product-development-head h2,.future-pipeline h2{font-size:clamp(44px,10vw,60px)!important;}
  .product-development-head>p,.future-pipeline-copy>p{font-size:12px!important;line-height:1.75!important;}
  .value-item{grid-template-columns:34px 1fr!important;gap:14px!important;padding:23px 20px!important;}
  .value-item h3{font-size:25px!important;}
  .value-item p{font-size:10px!important;line-height:1.65!important;}
  .future-pipeline{padding:76px 22px!important;}
  .future-opportunities{grid-template-columns:1fr!important;gap:10px!important;}
  .future-opportunities article{min-height:0;padding:22px!important;}
  .future-opportunities h3{font-size:24px!important;margin:22px 0 8px!important;}

  .market{padding:68px 22px 60px!important;}
  .market-inner{grid-template-columns:1fr!important;gap:34px!important;}
  .route-map{min-height:0!important;height:440px!important;padding:24px 16px 18px!important;grid-template-rows:auto 350px auto!important;overflow:visible!important;}
  .route-title{left:16px!important;top:22px!important;}
  .route-title h2{font-size:38px!important;}
  .outline-map-wrap{min-height:350px!important;height:350px!important;margin-top:5px!important;overflow:visible!important;}
  .outline-map-wrap .interactive-route-map{width:100%!important;height:100%!important;max-height:none!important;overflow:visible!important;}
  .map-detail{width:210px!important;max-width:210px!important;height:124px!important;max-height:124px!important;padding:12px 13px!important;}
  .map-detail-copy strong{font-size:23px!important;}
  .map-detail-copy p{font-size:8px!important;line-height:1.5!important;-webkit-line-clamp:2!important;}
  .map-caption{font-size:6px!important;left:16px!important;margin-top:8px!important;}
  .market-copy{padding:0!important;}
  .market-copy h2{font-size:clamp(44px,10vw,58px)!important;line-height:.9!important;}
  .market-copy>p{font-size:12px!important;line-height:1.75!important;}
  .phase{grid-template-columns:78px minmax(0,1fr)!important;gap:9px!important;padding:16px 0!important;}
  .phase small{grid-column:2!important;text-align:left!important;margin-top:-5px!important;}
  .market-next{gap:11px 16px!important;}
  .market-next a{font-size:9px!important;}

  .impact-grid{grid-template-columns:1fr!important;margin-top:38px!important;}
  .impact-stat,.impact-stat:not(:first-child){border-right:0!important;border-bottom:1px solid #cecabe!important;padding:28px 0!important;}
  .impact-stat b{font-size:70px!important;}
  .impact-stat span{font-size:22px!important;margin-top:14px!important;}
  .impact-copy{padding:34px 0!important;}
  .impact-copy h3{font-size:29px!important;line-height:1!important;}
  .impact-copy p{font-size:11px!important;line-height:1.7!important;}

  .resilience{padding-top:76px!important;padding-bottom:76px!important;}
  .resilience-inner{grid-template-columns:1fr!important;gap:34px!important;}
  .resilience h2{font-size:clamp(43px,10vw,58px)!important;line-height:.9!important;}
  .resilience>div>p{font-size:11px!important;line-height:1.7!important;}
  .risk-grid{grid-template-columns:1fr 1fr!important;}
  .risk-grid>div{padding:20px 16px 24px!important;}
  .risk-grid h3{font-size:22px!important;}
  .risk-grid p{font-size:9px!important;line-height:1.6!important;}

  .support{padding-top:68px!important;padding-bottom:68px!important;}
  .support-card{grid-template-columns:1fr!important;min-height:0!important;}
  .support-main,.support-contact{padding:30px 24px!important;}
  .support-main h2{font-size:clamp(42px,10vw,58px)!important;line-height:.92!important;}
  .support-main p{font-size:12px!important;line-height:1.7!important;}
  .support-actions{flex-direction:column!important;align-items:flex-start!important;gap:12px!important;}
  .support-contact strong,.support-contact a,.support-contact span{font-size:19px!important;}

  footer{padding:28px 22px!important;flex-direction:column!important;gap:14px!important;text-align:center!important;line-height:1.5;}
  footer nav{justify-content:center!important;gap:10px 16px!important;}
  footer nav a{font-size:9px!important;}
}

@media(max-width:520px){
  .hero{min-height:600px!important;}
  .hero-inner{top:12%!important;}
  .hero-inner h1{font-size:46px!important;}
  .hero-actions{flex-direction:column!important;align-items:flex-start!important;}
  .hero-actions .btn{width:auto;}
  .hero-bottom{bottom:15px!important;}
  .hero-bottom>div:nth-child(n+3){display:none!important;}

  .farm-image{min-height:270px!important;}
  .visual-story-grid{grid-template-rows:270px 190px 190px!important;}
  .statement h2{font-size:45px!important;}
  .product-photo{height:195px!important;flex-basis:195px!important;}
  .product-info{min-height:180px!important;}
  .future .product-info{min-height:235px!important;padding-top:82px!important;}
  .funding-visual{min-height:445px!important;}
  .donut{width:190px!important;height:190px!important;}
  .donut:after{width:120px!important;height:120px!important;}
  .yield b{font-size:25px!important;}
  .route-map{height:420px!important;grid-template-rows:auto 330px auto!important;}
  .outline-map-wrap{height:330px!important;min-height:330px!important;}
  .risk-grid{grid-template-columns:1fr!important;}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;}
}


/* FINAL MOBILE MARKET PATHWAY — clean editorial hierarchy.
   On phones the heading and map are separate layout blocks so the SVG can
   never drift upward into the title. The map remains contained and the
   location detail panel stays hidden until a place is selected. */
@media (max-width: 900px){
  .market > .route-map{
    min-height:0!important;
    height:auto!important;
    padding:0!important;
    display:block!important;
    overflow:visible!important;
    position:relative!important;
  }

  .market > .route-map > .route-title{
    position:relative!important;
    inset:auto!important;
    width:auto!important;
    height:auto!important;
    margin:0 0 26px!important;
    padding:0!important;
    z-index:10!important;
    pointer-events:none!important;
  }

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

  .market > .route-map > .route-title h2{
    font-size:clamp(36px,8.8vw,46px)!important;
    line-height:.92!important;
    max-width:420px!important;
  }

  .market > .route-map > .outline-map-wrap{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    height:clamp(420px,72vw,500px)!important;
    min-height:0!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    border:1px solid rgba(255,255,255,.08)!important;
    background:rgba(11,24,13,.18)!important;
  }

  .market > .route-map > .outline-map-wrap .interactive-route-map{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    transform:none!important;
    display:block!important;
  }

  .market > .route-map > .map-detail:not(.is-visible){
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
  }

  .market > .route-map > .map-detail.is-visible{
    visibility:visible!important;
    opacity:1!important;
  }

  .market > .route-map + .market-copy{
    margin-top:42px!important;
    padding-top:0!important;
  }
}

@media (max-width:520px){
  .market > .route-map > .route-title{
    margin-bottom:22px!important;
  }

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

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

  .market > .route-map + .market-copy{
    margin-top:36px!important;
  }
}