/* v7: globe integrated at every width; the export plan as a document */

/* ---------- hero: globe always behind and beside the text ---------- */
@media (max-width:1100px){
  .hero{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;min-height:100vh;min-height:100svh}
  #map{position:absolute!important;left:0!important;top:0!important;width:100%!important;height:100%!important;margin:0!important}
  .hero .wrap{padding-top:44vh!important;padding-bottom:44px}
  .globe-cap{position:absolute!important;right:var(--gut);bottom:14px;padding:0!important;font-size:.58rem;text-align:right}
  .hero::before{background:linear-gradient(180deg,rgba(10,17,29,0) 0%,rgba(10,17,29,.08) 26%,rgba(10,17,29,.74) 46%,rgba(10,17,29,.9) 100%)!important}
}
@media (max-width:640px){ .hero .wrap{padding-top:36vh!important} }

/* ---------- the export plan ---------- */
.plan2{background:var(--ivory);overflow:hidden}
.plan2-grid{display:grid;grid-template-columns:minmax(300px,.95fr) 1.05fr;gap:clamp(36px,6vw,96px);align-items:center}
.plan2-left h2{margin-top:26px}
.plan2-left .lede{margin-top:22px}
.toc{margin-top:40px;border-top:1px solid var(--navy)}
.toc-h{display:flex;justify-content:space-between;padding:12px 0;font:500 .68rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#4a5262;border-bottom:1px solid var(--line)}
.toc ol{list-style:none}
.toc li button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--line)}
.toc .tn{font:500 .7rem/1 var(--sans);letter-spacing:.12em;color:#8c6d33}
.toc .tt{font:400 1.12rem/1.3 var(--serif);color:var(--navy);display:flex;flex-direction:column;gap:4px;transition:color .3s}
.toc .tt small{font:400 .84rem/1.45 var(--sans);color:#4a5262;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .4s}
.toc li button.on .tt small{max-height:4.5em;opacity:1}
.toc .tp{font:400 .76rem/1 var(--sans);color:#6b7482;font-variant-numeric:tabular-nums}
.toc li button.on .tp{color:#8c6d33}
.toc li button:hover .tt,.toc li button.on .tt{color:#8c6d33}
.toc li button:focus-visible{outline:2px solid #8c6d33;outline-offset:2px}

.desk{position:relative;padding:26px 40px 44px;perspective:1800px}
.desk::after{content:"";position:absolute;left:14%;right:14%;bottom:10px;height:34px;background:radial-gradient(closest-side,rgba(14,26,44,.26),transparent);filter:blur(8px);z-index:0}
.doc{position:relative;width:min(100%,420px);aspect-ratio:1/1.3;margin:0 auto;transform-style:preserve-3d;transform:rotateX(var(--rx,3deg)) rotateY(var(--ry,-7deg));transition:transform .9s var(--ease);outline:none;cursor:pointer;z-index:1;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.doc:focus-visible{outline:2px solid #8c6d33;outline-offset:8px}
.pg{position:absolute;inset:0;background:#fff;border:1px solid #e3e1da;box-shadow:0 1px 0 rgba(0,0,0,.02),0 22px 44px rgba(14,26,44,.13);padding:7% 8%;display:flex;flex-direction:column;transform-origin:left center;transition:transform 1s var(--ease),opacity .8s ease;backface-visibility:hidden;overflow:hidden}
.pg.on{transform:none;opacity:1;z-index:6}
.pg.n1{transform:translate3d(11px,11px,-24px);z-index:5}
.pg.n2{transform:translate3d(22px,22px,-48px);z-index:4}
.pg.n3{transform:translate3d(30px,30px,-70px);opacity:0;z-index:3}
.pg.past{transform:translate3d(-24%,-3%,60px) rotateY(-34deg) rotateZ(-5deg);opacity:0;pointer-events:none;z-index:7}
.pg header{display:flex;justify-content:space-between;font:500 .56rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#6b7482;padding-bottom:10px;border-bottom:1px solid #e6e4dd}
.pg h4{font:400 clamp(1.25rem,2vw,1.55rem)/1.15 var(--serif);color:var(--navy);margin-top:18px}
.pg .pq{font-size:.8rem;line-height:1.45;color:#4a5262;margin-top:6px}
.pg .ex{margin-top:14px;padding:12px 12px 10px;background:#faf9f6;border:1px solid #ece9e2}
.pg figcaption{font:500 .56rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#8c6d33;margin-bottom:8px}
.pg .ex svg{display:block;width:100%;height:auto;overflow:visible}
.pg .lines{display:grid;gap:7px;padding-top:6px}
.pg .kf{margin-top:16px;font:500 .54rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#6b7482}
.pg .lines i{display:block;height:5px;border-radius:3px;background:#eceae4}
.pg footer{display:flex;justify-content:space-between;margin-top:auto;padding-top:9px;border-top:1px solid #e6e4dd;font:500 .52rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#8a919c}

/* cover */
.pg.cover{background:linear-gradient(160deg,#16273f 0%,#0a111d 100%);color:#fff;border-color:#0a111d;padding:9%;justify-content:space-between}
.pg.cover::before{content:"";position:absolute;right:-40%;top:20%;width:86%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(212,181,122,.22);box-shadow:0 0 0 22px rgba(212,181,122,0),0 0 0 23px rgba(212,181,122,.10)}
.cv-top{display:flex;align-items:center;gap:12px;position:relative}
.cv-mk{font:400 1.5rem/1 var(--serif);letter-spacing:.06em}
.cv-co{font:500 .56rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.72);padding-left:12px;border-left:1px solid rgba(255,255,255,.3)}
.cv-mid{position:relative}
.cv-k{font:500 .6rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--brass-hi)}
.pg.cover h4{font:300 clamp(2.3rem,4.2vw,3.3rem)/1 var(--serif);color:#fff;margin-top:14px;letter-spacing:-.01em}
.cv-rule{display:block;width:48px;height:1px;background:var(--brass-hi);margin:22px 0}
.cv-for{font-size:.7rem;color:rgba(255,255,255,.66);letter-spacing:.06em}
.cv-for b{display:block;font:400 1.15rem/1.3 var(--serif);color:#fff;margin-top:4px;letter-spacing:0}
.cv-bot{display:flex;justify-content:space-between;font:500 .54rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.58);border-top:1px solid rgba(255,255,255,.16);padding-top:12px;position:relative}

/* exhibits */
.ex .mapdots{fill:#b8bfcb}
.ex .b-ring{fill:none;stroke:#8c6d33;stroke-width:1}
.ex .b-fill{fill:#8c6d33}
.ex .t-num{font:600 8px var(--sans);fill:#0e1a2c;text-anchor:middle}
.ex .t-inv{font:600 7.5px var(--sans);fill:#fff;text-anchor:middle}
.ex .t-lab{font:400 9.5px var(--sans);fill:#1b2433}
.ex .t-lab.inv{fill:#fff}
.ex .t-sm{font:500 7px var(--sans);letter-spacing:.08em;text-transform:uppercase;fill:#6b7482}
.ex .t-gold{font:italic 400 10px var(--serif);fill:#8c6d33}
.ex .rule{stroke:#e6e4dd;fill:none}
.ex .rule-d{stroke:#c9cfd9;fill:none}
.ex .track{fill:#e8e6e0}
.ex .bar{fill:#0e1a2c}
.ex .frame{fill:none;stroke:#d8dce3}
.ex .zone{fill:rgba(185,152,92,.15)}
.ex .g-dot{fill:#b8bfcb}
.ex .band{fill:rgba(14,26,44,.08);stroke:#a6adb9;stroke-width:.75}
.ex .box{fill:#fff;stroke:#0e1a2c;stroke-width:.9}
.ex .box-b{fill:#0e1a2c}
.ex .arrow{stroke:#0e1a2c;fill:none;stroke-width:.9}
.ex .loop{stroke:#8c6d33;fill:none;stroke-width:1;stroke-dasharray:3 3}
.ex .brk{stroke:#8c6d33;fill:none;stroke-width:1}
.ex .sc1{fill:none;stroke:#a6adb9}
.ex .sc2{fill:#a6adb9}
.ex .sc3{fill:#8c6d33}
.ex .sel{fill:rgba(185,152,92,.12);stroke:rgba(140,109,51,.5);stroke-width:.75}
.pg .ex .a{opacity:0;transform:translateY(3px);transition:opacity .6s ease,transform .6s var(--ease)}
.pg.on .ex .a{opacity:1;transform:none;transition-delay:calc(.5s + var(--i,0) * 90ms)}

.doc-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:18px}
.doc-nav button{all:unset;cursor:pointer;padding:10px 16px;border:1px solid var(--navy);font:500 .84rem/1 var(--sans);color:var(--navy);transition:background .3s,color .3s,opacity .3s}
.doc-nav button:hover{background:var(--navy);color:#fff}
.doc-nav button:disabled{opacity:.3;pointer-events:none}
.doc-nav button:focus-visible{outline:2px solid #8c6d33;outline-offset:2px}
#dcount{font:500 .7rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#8c6d33;min-width:140px;text-align:center}
.doc-note{text-align:center;margin-top:12px;font-size:.78rem;color:#4a5262}

@media (max-width:980px){
  .plan2-grid{grid-template-columns:1fr;gap:28px}
  .toc{display:none}
  .desk{padding:16px 14px 34px}
  .doc{width:min(100%,400px)}
}
@media (max-width:420px){
  .pg{padding:7% 7%}
  .pg .ex{padding:8px}
  .pg .lines i:nth-child(n+3){display:none}
  #dcount{min-width:110px}
}
@media (prefers-reduced-motion:reduce){
  .pg,.doc{transition:none!important}
  .pg .ex .a{opacity:1!important;transform:none!important;transition:none!important}
}

/* globe can be turned by hand */
#map{cursor:grab;touch-action:pan-y}
#map.dragging{cursor:grabbing}

/* comparison definitions under the chart, every screen */
.mx-key{display:grid!important;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line-d)}
.mx-key span{display:block!important;font-size:.92rem;line-height:1.6;color:#c2cad7;position:relative;padding-top:16px}
.mx-key .k{position:absolute;left:0;top:0;width:28px;height:4px;margin:0!important}
.mx-key b{display:block;color:#fff;font-weight:500;margin-bottom:6px}
@media (max-width:760px){ .mx-key{grid-template-columns:1fr;gap:20px} }

/* buyer universe exhibit */
.ex .bu{fill:#c3c9d3}
.ex .bu-p{fill:#8c6d33}
.pg .ex .pri{transition:fill .6s ease}
.pg.on .ex .pri{fill:#8c6d33;transition-delay:1.5s}