/* Mapbox storytelling; AgroPlace logo, font, colors and data-card language. */
:root { --story-green:#24765f; --story-ink:#212529; --story-muted:#676e6a; --story-paper:#f7f8f5; }
html,body { background:var(--story-paper); }
button,a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible { outline:3px solid #24765f; outline-offset:4px; }
.story-shade { position:fixed; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg,rgba(247,248,245,.98),rgba(247,248,245,.85) 22%,rgba(247,248,245,.22) 47%,transparent 67%),linear-gradient(0deg,rgba(247,248,245,.96),transparent 24%); transition:opacity .5s; }
.story-header { position:fixed; top:0; left:0; right:0; height:94px; display:flex; align-items:center; padding:0 40px; gap:40px; z-index:4; background:linear-gradient(#f7f8f5ee,#f7f8f500); }
.story-logo { display:flex; align-items:center; width:155px; flex:none; }
.story-logo img { width:100%; }
.story-header .who { margin:0; padding:3px; border:1px solid #d5dbd5; border-radius:100px; background:#f7f8f5b3; width:256px; }
.story-header .who button { border-radius:100px; padding:8px 15px; font-size:12px; }
.story-header .who button[aria-selected=true] { background:#24765f; color:#fff; box-shadow:none; }
.demo-tag { font-size:10px; color:#7d847e; letter-spacing:.15px; margin-left:auto; margin-right:185px; }
.cta { top:27px; right:40px; border-radius:100px; background:var(--story-green); padding:11px 18px; font-size:12px; font-weight:500; box-shadow:none; z-index:5; }
.panel { left:40px; top:clamp(115px,17vh,190px); bottom:auto; width:min(365px,32vw); max-height:calc(100dvh - 285px); padding:0 4px 14px 0; border-radius:0; box-shadow:none; background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; scrollbar-width:thin; scrollbar-color:#24765f40 transparent; overflow-x:hidden; }
.story-rule { width:34px; height:3px; background:#24765f; margin-bottom:20px; }
.eyebrow { font-size:10px; letter-spacing:2px; font-weight:500; text-transform:uppercase; margin:0 0 16px; color:var(--story-green); }
h1 { font-size:clamp(28px,3.1vw,45px); line-height:1.12; font-weight:500; letter-spacing:-1.5px; margin:0 0 20px; text-wrap:balance; }
.lead { font-size:13px; line-height:1.75; color:var(--story-muted); min-height:0; max-width:325px; }
body[data-scene=intro] .panel,body[data-scene=final] .panel { width:min(520px,43vw); top:24vh; }
body[data-scene=intro] h1,body[data-scene=final] h1 { font-size:clamp(40px,5.2vw,74px); letter-spacing:-3px; line-height:1.04; }
body[data-scene=intro] .lead,body[data-scene=final] .lead { max-width:360px; font-size:14px; }
.counter { display:none; border:0; padding:0; gap:28px; margin:24px 0 0; }
.counter.on { display:flex; }
.counter b { color:#24765f; font-size:31px; font-weight:500; letter-spacing:-1px; }
.counter span { font-size:10px; }
.breakdown,.block { margin-top:22px; }
.breakdown.on,.block.on:not(#b-form):not(#b-years) { background:#ffffffeb; padding:14px; border:1px solid #e4e8e3; border-radius:12px; box-shadow:0 6px 24px #172b1e05; }
.rows { max-height:190px; margin-top:12px; }
.rows li { padding:9px 3px; border-bottom:1px solid #eef0ed; border-radius:0; font-size:12px; }
.rows li .bar { height:3px; }
.pills button { font-size:11px; padding:6px 10px; }
.legend { flex-wrap:wrap; gap:7px; font-size:10px; }
.total,.later,.cohort li,.visits li { font-size:11px; }
.thesis { font-size:13px; padding:10px; }
.block h3 { font-size:9px; letter-spacing:1px; }
.real-cta { display:inline-flex; align-items:center; gap:28px; padding:16px 21px; margin-top:7px; border-radius:100px; color:#fff; background:#24765f; text-decoration:none; font-size:13px; }
.real-cta:hover { background:#175f4b; }
.form-note { font-size:10px; color:#767e77; margin:10px 0; }
.lead-form[hidden] { display:none; }
.story-controls { position:fixed; top:98px; right:40px; display:flex; flex-direction:column; align-items:flex-end; gap:9px; z-index:3; }
.story-controls button,.view-switch { border:1px solid #dbe1da; border-radius:100px; background:#ffffffe6; color:#39493f; padding:9px 14px; font-size:11px; font-weight:500; cursor:pointer; }
.story-controls button:hover,.view-switch:hover { background:#e8efe8; }
#details-toggle { font-size:10px; color:#7a837b; border:0; background:transparent; }
.view-switch { position:fixed; top:176px; right:40px; z-index:3; }
.map-context { position:fixed; left:40px; bottom:130px; top:auto; font-size:10px; letter-spacing:.5px; color:#727e73; z-index:2; display:flex; gap:8px; align-items:center; }
.context-dot { width:6px; height:6px; border-radius:50%; background:#24765f; }
.context-separator { color:#a5afa6; }
.scroll-cue { position:fixed; bottom:140px; left:50%; transform:translateX(-50%); font-size:11px; color:#24765f; z-index:2; display:flex; align-items:center; gap:16px; margin:0; }
.scroll-cue span { font-size:23px; }
.scroll-cue.off { opacity:0; pointer-events:none; }
.story-timeline { position:fixed; bottom:20px; left:40px; right:40px; z-index:4; }
.timeline-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; color:#657366; font-size:10px; margin-bottom:12px; letter-spacing:.4px; }
#story-next { border:0; padding:5px 0 5px 16px; color:#24765f; background:transparent; cursor:pointer; font-size:12px; display:flex; align-items:center; gap:16px; }
#story-next:disabled { color:#829085; cursor:default; }
.stops { display:flex; flex-wrap:nowrap; gap:0; margin:0; padding:0; border:0; width:100%; overflow-x:auto; scrollbar-width:none; }
.stops::-webkit-scrollbar { display:none; }
.stops button { flex:1; min-width:68px; padding:12px 7px 0 0; text-align:left; background:transparent; border:0; border-top:2px solid #c7d0c6; border-radius:0; color:#7c867d; font-size:10px; line-height:1.35; min-height:52px; }
.stops button b { display:block; font-size:9px; font-weight:400; margin-bottom:5px; }
.stops button .t { display:block; }
.stops button:hover { color:#24765f; background:transparent; border-color:#8ba891; }
.stops button[aria-pressed=true] { background:transparent; color:#24765f; border-color:#24765f; font-weight:600; }
.card { top:auto; bottom:145px; right:40px; width:300px; padding:18px; max-height:calc(100dvh - 265px); border-radius:14px; background:#ffffffed; box-shadow:0 8px 40px #162f2014; border:1px solid #e4e8e3; z-index:4; }
.card h2 { font-size:21px; letter-spacing:-.5px; }
.card .where { font-size:9px; }
.card .why { font-size:12px; padding:10px; border-radius:8px; }
.card dl,.card .qa button,.rotation div { font-size:11px; }
.card h3 { font-size:9px; margin-top:14px; }
.card .x { width:28px; height:28px; }
.made { right:40px; bottom:126px; font-size:9px; color:#626d65; }
.mapboxgl-ctrl-bottom-right { bottom:95px!important; }
.mapboxgl-ctrl-bottom-left { bottom:105px!important; }
.mapboxgl-ctrl-group { box-shadow:0 2px 10px #00000012!important; border-radius:100px!important; }
.mapboxgl-ctrl-attrib { font-size:8px!important; background:#ffffff66!important; }
.mapboxgl-ctrl-logo { transform:scale(.75); transform-origin:right bottom; }
.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-group { margin:0 40px 35px 0; }
body.story-collapsed .panel,html.free .panel { opacity:0; pointer-events:none; transform:translateX(-15px); }
body.story-collapsed .story-shade,html.free .story-shade { opacity:.1; }
html.free .story-timeline,html.free .scroll-cue,html.free .map-context,html.free #details-toggle { display:none; }
html.free .mapboxgl-ctrl-bottom-right { bottom:12px!important; }
html.free .made { bottom:34px; right:85px; }
html.fb .story-header { position:fixed; background:#f7f8f5; }
html.fb .story-timeline,html.fb .story-controls,html.fb .view-switch,html.fb .map-context,html.fb .story-shade,html.fb .scroll-cue { display:none; }
html.fb .made { bottom:12px; }
@media(min-width:641px) and (max-width:1050px) { .demo-tag { display:none; } .story-header { gap:25px; padding:0 25px; } .story-logo { width:125px; } .story-header .who { width:235px; } .cta { right:25px; } .panel { left:25px; width:32vw; } h1 { font-size:31px; } .story-timeline { left:25px; right:25px; } .stops button { min-width:75px; } .card { right:25px; width:280px; } }
@media(max-width:640px) {
 .story-header { height:105px; padding:16px 18px; align-items:flex-start; gap:0; background:linear-gradient(#f7f8f5f2,#f7f8f500); }
 .story-logo { width:122px; margin-top:5px; }
 .story-header .who { position:absolute; top:65px; left:18px; width:225px; }
 .story-header .who button { font-size:10px; padding:7px 12px; }
 .demo-tag { display:none; }
 .cta { right:18px; top:17px; font-size:10px; padding:9px 13px; }
 .story-controls { top:111px; right:18px; gap:3px; }
 .story-controls button { font-size:10px; padding:7px 10px; }
 #details-toggle { font-size:9px; }
 .view-switch { top:66px; right:18px; padding:8px 10px; font-size:10px; }
 .story-shade { background:linear-gradient(0deg,#f7f8f5 8%,#f7f8f5ee 24%,#f7f8f5a8 39%,transparent 66%); }
 .panel { left:18px; right:18px; top:auto; bottom:125px; width:auto; max-height:34dvh; padding:0 4px 0 0; border:0; border-radius:0; }
 body[data-scene=intro] .panel,body[data-scene=final] .panel { top:auto; bottom:151px; width:auto; max-height:38dvh; }
 .story-rule { width:24px; height:2px; margin-bottom:12px; }
 .eyebrow { font-size:8px; letter-spacing:1.4px; margin-bottom:10px; }
 h1 { font-size:26px; letter-spacing:-1px; line-height:1.13; margin-bottom:12px; max-width:320px; }
 body[data-scene=intro] h1,body[data-scene=final] h1 { font-size:39px; letter-spacing:-1.7px; max-width:330px; }
 .lead,body[data-scene=intro] .lead,body[data-scene=final] .lead { font-size:11px; line-height:1.65; max-width:320px; }
 .counter { gap:24px; margin-top:16px; }
 .counter b { font-size:25px; }
 .counter span { font-size:9px; }
 .breakdown,.block { margin-top:14px; }
 .rows { max-height:130px; }
 .story-timeline { bottom:12px; left:18px; right:18px; }
 .timeline-meta { font-size:9px; margin-bottom:6px; }
 .stops button { font-size:9px; min-width:70px; padding-top:8px; min-height:46px; }
 .stops button .t { display:block; }
 .stops button b { font-size:8px; }
 .scroll-cue { left:18px; bottom:116px; transform:none; font-size:10px; }
 .map-context { display:none; }
 .made { top:111px; left:18px; right:auto; bottom:auto; background:#f7f8f5bb; padding:3px 7px; font-size:8px; border-radius:100px; }
 .card { left:12px; right:12px; width:auto; bottom:105px; top:auto; max-height:52dvh; border-radius:14px; z-index:6; }
 .mapboxgl-ctrl-bottom-right { bottom:102px!important; }
 .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-group { display:none; }
 .mapboxgl-ctrl-logo { transform:scale(.65); }
 .mapboxgl-ctrl-attrib { font-size:7px!important; }
 html.free .made { top:111px; bottom:auto; right:auto; }
 .real-cta { padding:12px 16px; font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
[hidden] { display:none!important; }
.card { visibility:hidden; pointer-events:none; max-height:calc(100dvh - 365px); }
.card.on { visibility:visible; pointer-events:auto; }
.made { bottom:145px; right:90px; }
@media(max-width:640px) {
 .card { max-height:52dvh; transform:translateY(calc(100% + 160px)); }
 .card.on { transform:none; }
 .demo-tag { display:block; position:absolute; top:44px; left:18px; margin:0; font-size:8px; }
 .made { bottom:auto; right:auto; }
}
.mapboxgl-control-container { position:fixed; inset:0; z-index:2; pointer-events:none; }
html.fb .mapboxgl-control-container { display:none; }

.mapboxgl-ctrl-bottom-right { bottom:135px!important; }
.made { bottom:170px; }
@media(max-width:640px) { .mapboxgl-ctrl-bottom-right { bottom:110px!important; } .made { bottom:auto; } }

.real-data-note{position:fixed;left:12px;bottom:4px;max-width:70vw;z-index:70;font:10px/1.3 "Golos Text",sans-serif;background:#fffffff2;color:#35463f;padding:3px 7px;border-radius:5px;pointer-events:none} @media(max-width:640px){.real-data-note{bottom:104px;max-width:94vw;font-size:9px}.demo-tag{max-width:130px}}