/* Granore Commodities: one beige ground on every page (header and footer
   included), navy ink, no hairlines, and the components of the pages built for
   Granore (about, compliance, contact, team). Loaded last on every page.
   Text is never hidden by CSS alone: anything that animates in ends visible
   even if the animation or the script does not run. */
:root{--gx-beige:#f3f0e8;--gx-beige2:#e8e1d2;--gx-paper:#fbf8f1;--gx-navy:#1f1b16;--gx-navy2:#4b4338;--gx-muted:#695f50;--gx-leaf:#9a6a1f;--gx-gold:#c38d2f;--gx-red:#a8322a;--gx-serif:'Fraunces',Georgia,serif;--gx-accent-serif:'Instrument Serif','Fraunces',Georgia,serif;--gx-mono:'IBM Plex Mono',ui-monospace,monospace}

/* ---------- one ground ---------- */
body.hdr-navy,body.hdr-navy.metal,body.hdr-navy.ed-page,body.hdr-navy.hdr-dark{background:var(--gx-beige)!important;--hdr:243,240,232}
body.hdr-navy .metal-page,body.hdr-navy.metal main{background:var(--gx-beige)!important}
.ed.pg-company,.ed.pg-compliance,.ed.pg-esg{--paper:var(--gx-beige)!important;--accent:var(--gx-navy)!important}

/* ---------- header: same beige as the page, no rule ---------- */
body.hdr-navy .nav,body.hdr-navy .nav.compact,
body.hdr-navy .site-hdr .nav,body.hdr-navy .site-hdr .nav.compact{background:var(--gx-beige)!important;border-bottom:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
body.hdr-navy .nav .brand img.logo-on-light{display:block!important}
body.hdr-navy .nav .brand img.logo-on-dark{display:none!important}
body.hdr-navy .nav .nav-links>a:not(.cta),body.hdr-navy .nav .drop>button{color:var(--gx-navy2)!important}
body.hdr-navy .nav .nav-links>a:not(.cta):hover,body.hdr-navy .nav .drop>button:hover{color:var(--gx-navy)!important}
body.hdr-navy .nav .nav-links>a[aria-current="page"]{color:var(--gx-navy)!important;font-weight:600!important}
body.hdr-navy .nav .nav-links>a[aria-current="page"]::after{display:none!important}
body.hdr-navy .nav .drop>button svg{stroke:currentColor!important}
body.hdr-navy .nav .burger span{background:var(--gx-navy)!important}
body.hdr-navy .nav .nav-links>a.cta{--ext:var(--gx-navy2);background:var(--gx-navy)!important;border-color:var(--gx-navy)!important;color:#fff!important}
body.hdr-navy .nav .nav-links>a.cta svg{stroke:#fff!important}
body.hdr-navy .nav .drop-menu{background:var(--gx-beige)!important;border-color:var(--gx-beige2)!important}
body.hdr-navy .nav .drop-menu a{color:var(--gx-navy)!important}
body.hdr-navy .nav .drop-menu a:hover{background:var(--gx-beige2)!important}
body.hdr-navy .nav .drop-menu .mgroup-h{color:var(--gx-muted)!important}
@media (max-width:1100px){
 body.hdr-navy .nav .nav-links{background:var(--gx-beige)!important;border-bottom:0!important;box-shadow:0 18px 40px rgba(22,32,58,.12)!important}
 body.hdr-navy .nav .nav-links>a:not(.cta),body.hdr-navy .nav .drop>button{border-bottom-color:var(--gx-beige2)!important}
 body.hdr-navy .nav .drop-menu{background:var(--gx-beige2)!important}
}

/* ---------- footer: same beige, navy ink ---------- */
body.hdr-navy footer,body.hdr-navy footer.foot{background:var(--gx-beige)!important;color:var(--gx-navy)!important;border-top:0!important}
body.hdr-navy footer p,body.hdr-navy footer div,body.hdr-navy footer span,body.hdr-navy footer address{color:var(--gx-muted)!important}
body.hdr-navy footer h4{color:var(--gx-navy)!important}
body.hdr-navy footer a,body.hdr-navy footer a .fn{color:var(--gx-navy)!important}
body.hdr-navy footer a:hover{text-decoration:underline}
body.hdr-navy footer *{border-color:transparent!important}

/* ---------- no hairlines anywhere ---------- */
body.hdr-navy .ed-thread,body.hdr-navy hr.mp-rule,body.hdr-navy .ed-node{display:none!important}
body.hdr-navy :is(.ed-fact,.ed-art,.ed-arts,.ed-facts,.ed-sec,.ed-hero,.ed-check,.ed-map-legend,.mp-grades,.mp-grades li,.mp-facts,.mp-facts>div,.mp-fig,.mp-all,.mp-stage,.mp-intro,.ed-split,.ed-sorter,.ed-cycle,.ed-steps,.ed-steps li,.ed-cycle li){border-color:transparent!important}
body.hdr-navy .ed-leaf{display:none!important}

/* ---------- editorial bands that used to be dark ---------- */
body.hdr-navy .ed-dark{background:var(--gx-beige)!important;color:var(--gx-navy)!important}
body.hdr-navy .ed-dark h2,body.hdr-navy .ed-dark h3,body.hdr-navy .ed-dark p,body.hdr-navy .ed-dark li,body.hdr-navy .ed-dark dt,body.hdr-navy .ed-dark dd,body.hdr-navy .ed-dark b,body.hdr-navy .ed-dark span,body.hdr-navy .ed-dark a{color:var(--gx-navy)!important}
body.hdr-navy .ed-dark .ed-eyebrow,body.hdr-navy .ed-dark .ed-cap{color:var(--gx-muted)!important}
.ed.pg-esg{--leaf:#6f9f4c!important;--deep:var(--gx-beige)!important}
.vx-s0{fill:#8fbd5f!important;background-color:#8fbd5f!important}
.vx-s1{fill:#5f9a52!important;background-color:#5f9a52!important}
.vx-s2{fill:#3f7444!important;background-color:#3f7444!important}
.vx-s3{fill:#264a2f!important;background-color:#264a2f!important}

/* legal: the dark band at the top becomes beige */
body.hdr-navy .phero{background:var(--gx-beige)!important;color:var(--gx-navy)!important}
body.hdr-navy .phero *{color:var(--gx-navy)!important}
body.hdr-navy .phero::before,body.hdr-navy .phero::after{display:none!important}

/* product pages: the 3D heap sits on the page */
.metal-page .mp-shot.mp-shot--grain{background:transparent!important}

/* ---------- How we trade ---------- */
body.hdr-navy .hero-left{background:transparent!important}
body.hdr-navy .lead{display:block!important;text-align:center;padding-left:var(--pad);padding-right:var(--pad)}
body.hdr-navy .lead>div:empty{display:none}
body.hdr-navy .lead p{max-width:44ch;margin:0 auto!important;background:var(--gx-beige)!important}
body.hdr-navy .spine{top:var(--spine-top,100vh)!important}

/* ---------- team: the two founders drawn in pixels ---------- */
.metal-page .mp-shot.mp-shot--team{position:relative;background:transparent!important;height:auto!important;padding-top:0!important;aspect-ratio:560/300!important;overflow:visible!important}
.mp-shot--team .tm-duo{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tm-px{opacity:0;animation:tm-on .5s steps(2,end) forwards;animation-delay:var(--d)}
.tm-buy{fill:var(--gx-leaf)}.tm-sell{fill:var(--gx-navy)}
.tm-dot{fill:#c8bea8;animation:tm-flow 2.6s linear infinite;animation-delay:calc(var(--k) * .12s + 1.4s)}
.tm-lab{font:12px var(--gx-mono);letter-spacing:.2em;fill:var(--gx-muted)}
@keyframes tm-on{to{opacity:1}}
@keyframes tm-flow{0%,100%{fill:#c8bea8}8%{fill:var(--gx-gold)}20%{fill:#c8bea8}}

/* =====================================================================
   Granore components (gx-)
   ===================================================================== */
.gx{color:var(--gx-navy)}
.gx-wrap{max-width:1320px;margin:0 auto;padding:0 clamp(20px,4.5vw,64px)}
.gx-k{display:block;font:500 11px/1 var(--gx-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--gx-muted);margin:0 0 22px}
.gx-sec{padding:clamp(80px,12vw,170px) 0}
.gx-h2{font-family:var(--gx-serif);font-weight:400;font-size:clamp(36px,5.4vw,84px);line-height:1;letter-spacing:-.03em;margin:0;max-width:16ch}
.gx-h2 em,.gx-h1 em{font-family:var(--gx-accent-serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--gx-leaf)}
.gx-p{font-size:clamp(17px,1.45vw,20px);line-height:1.55;color:var(--gx-navy2);max-width:52ch;margin:26px 0 0}

/* reveal on scroll: hidden only once the script has marked the page ready */
.gx-ready .gx-r{opacity:0;transform:translateY(34px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
.gx-ready .gx-r.is-in{opacity:1;transform:none}

/* hero: lines rise out of a mask, pure CSS, always end visible */
.gx-hero{padding:clamp(150px,22vh,240px) 0 clamp(70px,11vh,130px)}
.gx-h1{font-family:var(--gx-serif);font-weight:400;font-size:clamp(50px,9.4vw,156px);line-height:.92;letter-spacing:-.04em;margin:0}
.gx-h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.gx-h1 .ln>span{display:block;transform:translateY(108%);animation:gx-up 1.1s cubic-bezier(.2,.75,.15,1) forwards;animation-delay:calc(var(--i) * 120ms + 150ms)}
@keyframes gx-up{to{transform:none}}
.gx-hero .gx-p{animation:gx-fade 1s ease .8s both}
@keyframes gx-fade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.gx-hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-top:clamp(30px,5vw,60px)}
.gx-scroll{font:11px var(--gx-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gx-muted);display:flex;align-items:center;gap:12px}
.gx-scroll::after{content:"";width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);animation:gx-bob 1.8s ease-in-out infinite}
@keyframes gx-bob{50%{transform:translateY(5px) rotate(45deg)}}

/* marquee of ports, outline and solid words */
.gx-mq{overflow:hidden;padding:clamp(24px,4vw,50px) 0;white-space:nowrap;user-select:none}
.gx-mq-t{display:inline-flex;align-items:center;animation:gx-mq 48s linear infinite}
.gx-mq-t span{font-family:var(--gx-serif);font-size:clamp(54px,9vw,150px);line-height:1;letter-spacing:-.03em;padding:0 .28em;color:transparent;-webkit-text-stroke:1.3px var(--gx-navy)}
.gx-mq-t span:nth-of-type(3n+1){color:var(--gx-navy);-webkit-text-stroke:0}
.gx-mq-t i{display:inline-block;width:.3em;height:.3em;border-radius:50%;background:var(--gx-gold);font-size:clamp(54px,9vw,150px)}
@keyframes gx-mq{to{transform:translateX(-50%)}}

/* full-bleed photo band, text always readable */
.gx-band{position:relative;height:clamp(480px,88vh,900px);overflow:hidden;background:var(--gx-navy);color:#fff;isolation:isolate}
.gx-band img{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;display:block;z-index:-2;will-change:transform}
.gx-band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(9,14,28,.10) 0%,rgba(9,14,28,.25) 40%,rgba(9,14,28,.82) 100%)}
.gx-band-in{position:absolute;left:0;right:0;bottom:0;max-width:1320px;margin:0 auto;padding:0 clamp(20px,4.5vw,64px) clamp(34px,7vh,72px)}
.gx-band .gx-k{color:rgba(255,255,255,.85)}
.gx-band-t{font-family:var(--gx-serif);font-weight:400;font-size:clamp(44px,7.4vw,118px);line-height:.95;letter-spacing:-.035em;margin:0;max-width:13ch;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.gx-band-figs{display:flex;flex-wrap:wrap;gap:clamp(26px,6vw,90px);list-style:none;margin:clamp(28px,5vh,52px) 0 0;padding:0}
.gx-band-figs li{font:12px var(--gx-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.gx-band-figs b{display:block;font-family:var(--gx-serif);font-weight:400;font-size:clamp(40px,5vw,72px);line-height:1;letter-spacing:-.03em;text-transform:none;color:#fff;margin-bottom:8px}

/* route map */
.gx-routes-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.gx-legend{display:flex;gap:26px;flex-wrap:wrap;list-style:none;margin:0;padding:0;font:11px var(--gx-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gx-muted)}
.gx-legend li{display:flex;align-items:center;gap:10px}
.gx-legend svg{width:34px;height:8px}
.gx-map{margin-top:clamp(40px,6vw,80px);overflow-x:auto;-webkit-overflow-scrolling:touch}
.gx-map svg{display:block;width:100%;min-width:760px;height:auto}
.rt-base{fill:none;stroke:#d6cdb9;stroke-width:2.2;stroke-linecap:round}
.rt-flow{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:2 16;animation:rt-flow 1.4s linear infinite}
.rt-sea .rt-flow{stroke:var(--gx-navy)}
.rt-road .rt-flow{stroke:var(--gx-gold);stroke-dasharray:8 10;animation-duration:2s}
.rt-river .rt-flow{stroke:var(--gx-leaf)}
@keyframes rt-flow{to{stroke-dashoffset:-36}}
.rt-node circle{fill:var(--gx-beige);stroke:var(--gx-navy);stroke-width:2}
.rt-node.o circle{stroke:var(--gx-leaf);fill:var(--gx-leaf)}
.rt-node.h circle{fill:var(--gx-navy)}
.rt-node.m circle{fill:var(--gx-beige);stroke:var(--gx-navy);stroke-width:2.4}
.rt-node text{font:13px var(--gx-mono);letter-spacing:.06em;fill:var(--gx-navy)}
.rt-node text.s{font-size:10.5px;fill:var(--gx-muted);letter-spacing:.14em;text-transform:uppercase}
.rt-region{font:500 11px var(--gx-mono);letter-spacing:.26em;text-transform:uppercase;fill:var(--gx-muted)}
.rt-strait{font-family:var(--gx-accent-serif);font-style:italic;font-size:30px;fill:var(--gx-navy)}
.rt-pulse{fill:none;stroke:var(--gx-navy);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:rt-pulse 2.4s ease-out infinite}
@keyframes rt-pulse{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}

/* fact tiles */
.gx-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:clamp(40px,6vw,70px) 0 0;padding:0}
.gx-tile{background:var(--gx-beige2);border-radius:6px;padding:clamp(22px,2.4vw,34px);min-height:190px;display:flex;flex-direction:column;justify-content:space-between;gap:30px;transition:background .3s,color .3s}
.gx-tile:hover{background:var(--gx-navy);color:#fff}
.gx-tile:hover dt{color:rgba(255,255,255,.7)}
.gx-tile dt{font:11px var(--gx-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gx-muted)}
.gx-tile dd{margin:0;font-family:var(--gx-serif);font-size:clamp(21px,1.9vw,28px);line-height:1.18;letter-spacing:-.01em}
.gx-tile dd a{color:inherit}
.gx-tile--wide{grid-column:span 2}
@media (max-width:900px){.gx-tiles{grid-template-columns:1fr 1fr}.gx-tile--wide{grid-column:span 2}}
@media (max-width:560px){.gx-tiles{grid-template-columns:1fr}.gx-tile--wide{grid-column:auto}}

/* closing call to action */
.gx-end{padding:clamp(90px,15vw,200px) 0;text-align:center}
.gx-end .gx-h2{margin:0 auto;max-width:14ch}
.gx-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(30px,4vw,48px)}
.gx-btn{display:inline-flex;align-items:center;gap:12px;padding:17px 28px;border-radius:999px;background:var(--gx-navy);color:#fff!important;font-weight:600;font-size:15px;text-decoration:none;transition:background .25s}
.gx-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .25s}
.gx-btn:hover{background:var(--gx-leaf)}
.gx-btn:hover svg{transform:translateX(4px)}
.gx-btn--ghost{background:transparent;color:var(--gx-navy)!important;box-shadow:inset 0 0 0 1.5px var(--gx-navy)}
.gx-btn--ghost:hover{background:var(--gx-navy);color:#fff!important}

/* ---------- compliance: the cargo file ---------- */
.gx-file{position:relative;height:calc(var(--n,6) * 80vh + 100vh)}
.gx-file-pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(30px,5vw,90px);max-width:1320px;margin:0 auto;padding:70px clamp(20px,4.5vw,64px) 0}
.gx-file-txt{position:relative;min-height:340px}
.gx-count{font:12px var(--gx-mono);letter-spacing:.2em;color:var(--gx-muted);margin-bottom:26px;display:flex;align-items:center;gap:14px}
.gx-count b{font-weight:500;color:var(--gx-navy)}
.gx-bar{flex:1;max-width:160px;height:2px;background:var(--gx-beige2);position:relative;overflow:hidden}
.gx-bar i{position:absolute;inset:0;background:var(--gx-navy);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .4s}
.gx-ctl{position:absolute;top:56px;left:0;right:0;opacity:0;transform:translateY(24px);transition:opacity .5s,transform .5s;pointer-events:none}
.gx-ctl.is-on{opacity:1;transform:none;pointer-events:auto}
.gx-ctl h3{font-family:var(--gx-serif);font-weight:400;font-size:clamp(34px,4.2vw,62px);line-height:1;letter-spacing:-.03em;margin:0 0 22px}
.gx-ctl p{font-size:clamp(16px,1.35vw,19px);line-height:1.55;color:var(--gx-navy2);max-width:40ch;margin:0}
.gx-docs{position:relative;height:min(72vh,640px)}
.gx-doc{position:absolute;top:50%;left:50%;width:min(400px,78%);background:var(--gx-paper);border-radius:3px;padding:26px 28px 30px;color:var(--gx-navy);box-shadow:0 40px 70px -30px rgba(22,32,58,.45),0 2px 6px rgba(22,32,58,.08);transform:translate(-50%,-50%) translate(0,70vh) rotate(var(--r));transition:transform 1s cubic-bezier(.2,.75,.15,1),box-shadow .6s;font-size:12px}
.gx-doc.is-in{transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--r))}
.gx-doc.is-top{box-shadow:0 50px 90px -30px rgba(22,32,58,.55),0 2px 6px rgba(22,32,58,.1)}
.gx-doc-h{display:flex;justify-content:space-between;align-items:center;font:10px var(--gx-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gx-muted);padding-bottom:16px;margin-bottom:18px;box-shadow:0 1px 0 var(--gx-beige2)}
.gx-doc-h img{height:12px;width:auto}
.gx-doc h4{font-family:var(--gx-serif);font-weight:500;font-size:22px;line-height:1.1;margin:0 0 18px;letter-spacing:-.01em}
.gx-doc dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0 0 18px;font:11px var(--gx-mono)}
.gx-doc dt{color:var(--gx-muted);text-transform:uppercase;letter-spacing:.1em}
.gx-doc dd{margin:0;color:var(--gx-navy)}
.gx-doc .bars i{display:block;height:7px;border-radius:4px;background:var(--gx-beige2);margin:9px 0}
.gx-doc .sig{display:flex;justify-content:space-between;gap:20px;margin-top:22px;font:10px var(--gx-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gx-muted)}
.gx-doc .sig span{flex:1;padding-top:30px;background:linear-gradient(var(--gx-navy),var(--gx-navy)) 0 26px/100% 1px no-repeat}
.gx-stamp{position:absolute;right:18px;bottom:18px;width:104px;height:104px;color:var(--gx-red);opacity:0;transform:scale(1.6) rotate(-14deg);transition:opacity .25s .55s,transform .35s cubic-bezier(.3,1.6,.5,1) .55s;mix-blend-mode:multiply}
.gx-doc.is-in .gx-stamp{opacity:.88;transform:scale(1) rotate(-14deg)}
.gx-stamp text{font:600 9.5px var(--gx-mono);letter-spacing:.2em;fill:currentColor}
.gx-doc-cap{display:none}
@media (max-width:900px){
 .gx-file{height:auto}
 .gx-file-pin{position:static;height:auto;display:block;padding:0 clamp(20px,4.5vw,64px)}
 .gx-file-txt{display:none}
 .gx-docs{height:auto;display:grid;gap:150px;padding-bottom:120px}
 .gx-doc{position:relative;top:auto;left:auto;width:auto;max-width:420px;transform:rotate(var(--r))!important}
 .gx-doc .gx-stamp{opacity:.88;transform:scale(1) rotate(-14deg)}
 .gx-doc-cap{display:block;position:absolute;top:calc(100% + 18px);left:0;right:0;font-size:15px;line-height:1.5;color:var(--gx-navy2)}
 .gx-doc-cap b{display:block;font-family:var(--gx-serif);font-weight:400;font-size:24px;color:var(--gx-navy);margin-bottom:4px}
}

/* never: struck through as they come into view */
.gx-never{list-style:none;margin:clamp(40px,6vw,70px) 0 0;padding:0}
.gx-never li{margin:0 0 .3em}
.gx-never s{position:relative;display:inline-block;text-decoration:none;font-family:var(--gx-serif);font-size:clamp(42px,7.6vw,124px);line-height:1.04;letter-spacing:-.035em;color:var(--gx-navy)}
.gx-never s::after{content:"";position:absolute;left:-1%;right:-1%;top:55%;height:.075em;background:var(--gx-red);transform:scaleX(1);transform-origin:left;transition:transform 1s cubic-bezier(.7,0,.2,1) .25s}
.gx-ready .gx-never li:not(.is-in) s::after{transform:scaleX(0)}
.gx-never small{display:block;font:11px var(--gx-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gx-muted);margin-bottom:4px}

/* chips */
.gx-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:clamp(40px,6vw,70px)}
.gx-chips h3{font:500 11px var(--gx-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--gx-muted);margin:0 0 18px}
.gx-chips ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.gx-chips li{background:var(--gx-beige2);border-radius:999px;padding:9px 15px;font-size:14px;color:var(--gx-navy)}
@media (max-width:900px){.gx-chips{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.gx-chips{grid-template-columns:1fr}}

/* ---------- request an offer: a sentence to fill in ---------- */
.gx-sentence{font-family:var(--gx-serif);font-weight:400;font-size:clamp(30px,4.4vw,66px);line-height:1.42;letter-spacing:-.025em;color:var(--gx-navy);margin:0;max-width:24ch}
.gx-sentence .w{white-space:nowrap}
.gx-in{font:inherit;letter-spacing:inherit;color:var(--gx-leaf);background:transparent;border:0;border-radius:0;padding:0 .08em;margin:0 .04em;box-shadow:inset 0 -.09em 0 var(--gx-navy);outline:0;transition:box-shadow .2s,color .2s;field-sizing:content;min-width:2ch;max-width:100%}
.gx-in::placeholder{color:#b8af9b;opacity:1}
.gx-in:focus{box-shadow:inset 0 -.16em 0 var(--gx-gold)}
select.gx-in{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:.62em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2316203a' stroke-width='1.6'/%3E%3C/svg%3E") right .05em center/.36em no-repeat}
@supports not (field-sizing:content){.gx-in.n{width:4.6ch}.gx-in.p{width:7.5ch}.gx-in.d{width:8ch}}
.gx-form-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(40px,6vw,100px);margin-top:clamp(60px,9vw,120px);align-items:start}
@media (max-width:960px){.gx-form-grid{grid-template-columns:1fr}}
.gx-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.gx-fields .full{grid-column:1/-1}
@media (max-width:600px){.gx-fields{grid-template-columns:1fr}}
.gx-fields label{display:block;font:11px var(--gx-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gx-muted);margin-bottom:9px}
.gx-fields label .req{color:var(--gx-red)}
.gx-fields input,.gx-fields textarea{width:100%;box-sizing:border-box;background:var(--gx-beige2);border:0;border-radius:6px;padding:16px;font-size:16px;font-family:inherit;color:var(--gx-navy);outline:0;transition:background .2s,box-shadow .2s}
.gx-fields textarea{min-height:130px;resize:vertical}
.gx-fields input:focus,.gx-fields textarea:focus{background:var(--gx-paper);box-shadow:0 0 0 2px var(--gx-navy)}
.gx-consent{display:flex;gap:14px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--gx-navy2);margin:28px 0}
.gx-consent input{margin-top:3px;width:18px;height:18px;accent-color:var(--gx-navy)}
.gx-send{display:inline-flex;align-items:center;gap:14px;border:0;cursor:pointer;padding:20px 34px;border-radius:999px;background:var(--gx-navy);color:#fff;font-weight:600;font-size:16px;font-family:inherit;transition:background .25s}
.gx-send svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2;transition:transform .25s}
.gx-send:hover{background:var(--gx-leaf)}
.gx-send:hover svg{transform:translateX(5px)}
.gx-form .form-note{margin-top:18px;font-size:14px;color:var(--gx-muted)}
.gx-cards{display:grid;gap:12px}
.gx-card{background:var(--gx-beige2);border-radius:6px;padding:24px 26px}
.gx-card span{display:block;font:11px var(--gx-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gx-muted);margin-bottom:10px}
.gx-card p{margin:0;font-family:var(--gx-serif);font-size:22px;line-height:1.25;letter-spacing:-.01em}
.gx-card p small{display:block;font-family:Inter,system-ui,sans-serif;font-size:14px;color:var(--gx-navy2);margin-top:6px;letter-spacing:0}
.gx-card a{color:var(--gx-navy)}
.gx-card--dark{background:var(--gx-navy);color:#fff}
.gx-card--dark span{color:rgba(255,255,255,.65)}
.gx-card--dark a,.gx-card--dark p small{color:#fff}
.gx-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(40px,6vw,70px);align-items:start}
@media (max-width:800px){.gx-faq{grid-template-columns:1fr}}
.gx-faq details{background:var(--gx-beige2);border-radius:6px;padding:0 26px;transition:background .25s}
.gx-faq details[open]{background:var(--gx-paper)}
.gx-faq summary{cursor:pointer;list-style:none;padding:24px 34px 24px 0;position:relative;font-family:var(--gx-serif);font-size:clamp(19px,1.6vw,23px);line-height:1.25}
.gx-faq summary::-webkit-details-marker{display:none}
.gx-faq summary::after{content:"";position:absolute;right:2px;top:50%;width:12px;height:12px;margin-top:-6px;background:linear-gradient(var(--gx-navy),var(--gx-navy)) center/12px 1.6px no-repeat,linear-gradient(var(--gx-navy),var(--gx-navy)) center/1.6px 12px no-repeat;transition:transform .3s}
.gx-faq details[open] summary::after{transform:rotate(45deg)}
.gx-faq details p{margin:0 0 26px;color:var(--gx-navy2);line-height:1.6}

@media (prefers-reduced-motion:reduce){
 .gx-h1 .ln>span,.gx-hero .gx-p{animation:none;transform:none}
 .gx-mq-t,.rt-flow,.rt-pulse,.tm-dot{animation:none}
 .tm-px{animation:none;opacity:1}
 .gx-ready .gx-r{opacity:1;transform:none;transition:none}
}

/* the reading-progress hairline at the top: gone */
body.hdr-navy #progress,body.hdr-navy .progress{display:none!important}
/* section markers of the editorial pages: gone; band titles keep their size */
body.hdr-navy .ed-sec::before,body.hdr-navy .ed-hero::before,body.hdr-navy .ed-sec::after{display:none!important}
.gx-band p.gx-band-t{font-family:var(--gx-serif)!important;font-size:clamp(44px,7.4vw,118px)!important;line-height:.95!important;color:#fff!important;max-width:13ch!important}
/* inside the editorial pages, the Granore hero keeps its scale */
.gx-hero h1.gx-h1{font-family:var(--gx-serif)!important;font-weight:400!important;font-size:clamp(50px,9.4vw,156px)!important;line-height:.92!important;letter-spacing:-.04em!important;max-width:none!important;margin:0!important}
.gx-hero p.gx-p{font-size:clamp(17px,1.45vw,20px)!important;line-height:1.55!important;max-width:52ch!important}

/* =====================================================================
   v3: real-format trade documents (compliance), moving vessels (about),
   thread cue (how we trade)
   ===================================================================== */
.gx-doc{font-family:Georgia,'Times New Roman',serif;font-size:11px;line-height:1.35;color:#1d1d1b;padding:22px 22px 26px;width:min(430px,82%);border-radius:1px;background:var(--gx-paper) linear-gradient(transparent 0 0)}
.gx-doc .dk-mark{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font:700 54px/1 Georgia,serif;letter-spacing:.18em;color:rgba(168,50,42,.07);transform:rotate(-24deg)}
.dk-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}
.dk-top .t{font:700 13px/1.15 Georgia,serif;letter-spacing:.04em;text-transform:uppercase}
.dk-top .s{font-size:9.5px;color:#55534d;margin-top:3px;text-transform:uppercase;letter-spacing:.06em}
.dk-top .n{font-size:9.5px;text-align:right;color:#55534d;white-space:nowrap}
.dk-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid #3a3833}
.dk-grid>div{border-right:1px solid #3a3833;border-bottom:1px solid #3a3833;padding:5px 7px;min-height:34px}
.dk-grid>div:nth-child(2n){border-right:0}
.dk-grid>.w{grid-column:1/-1;border-right:0}
.dk-grid>div:nth-last-child(-n+1){border-bottom:0}
.dk-grid b{display:block;font:600 7.5px/1.2 Arial,Helvetica,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#55534d;margin-bottom:3px}
.dk-grid i,.dk-cl i,.dk-sw i{font-family:var(--gx-accent-serif);font-style:italic;font-size:15px;line-height:1;color:#1f3c88}
.dk-cl{margin:0;padding:0;list-style:none}
.dk-cl li{display:grid;grid-template-columns:22px 1fr;gap:4px;padding:5px 0;border-bottom:1px dotted #8f8a7f}
.dk-cl li span{font:600 9px/1.4 Arial,Helvetica,sans-serif;text-transform:uppercase;letter-spacing:.04em}
.dk-sw{font:10.5px/1.55 'Courier New',var(--gx-mono),monospace;margin:0}
.dk-sw div{display:grid;grid-template-columns:44px 1fr}
.dk-sw u{text-decoration:none;color:#55534d}
.dk-tb{width:100%;border-collapse:collapse;font-size:10px;margin-top:8px}
.dk-tb th,.dk-tb td{border:1px solid #3a3833;padding:4px 6px;text-align:left}
.dk-tb th{font:600 7.5px Arial,Helvetica,sans-serif;text-transform:uppercase;letter-spacing:.05em;color:#55534d;background:#f1ece0}
.dk-foot{margin-top:9px;font-size:9.5px;color:#3d3b36}
.dk-sig{display:flex;justify-content:space-between;gap:14px;margin-top:14px;font:600 7.5px Arial,Helvetica,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#55534d}
.dk-sig span{flex:1;padding-top:22px;background:linear-gradient(#3a3833,#3a3833) 0 20px/100% 1px no-repeat}
.gx-stamp{color:var(--gx-red)}
.gx-file-pin .gx-ctl .gx-k{margin-bottom:16px}

/* how we trade: the thread starts right under the last word, with a cue */
.gx-cue{position:absolute;left:50%;top:var(--spine-top,100vh);z-index:2;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none}
.gx-cue span{font:500 10px var(--gx-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--gx-muted);background:var(--gx-beige);padding:6px 8px;margin-top:10px}
.gx-cue i{width:7px;height:7px;border-radius:50%;background:var(--gx-navy);animation:gx-drop 1.9s cubic-bezier(.5,0,.3,1) infinite}
@keyframes gx-drop{0%{transform:translateY(0);opacity:0}15%{opacity:1}80%{opacity:1}100%{transform:translateY(64px);opacity:0}}

/* about: route map with moving ships and trucks */
.rt-base{stroke:#d9d0bd;stroke-width:1.6}
.rt-ship path,.rt-truck path{fill:var(--gx-navy)}
.rt-ship .hull{fill:var(--gx-navy)}.rt-ship .deck{fill:var(--gx-leaf)}
.rt-truck .box{fill:var(--gx-leaf)}
.rt-node.o circle{stroke:var(--gx-leaf);fill:var(--gx-leaf)}
.rt-tbl{width:100%;border-collapse:collapse;margin-top:clamp(40px,5vw,60px);font:13px var(--gx-mono);font-variant-numeric:tabular-nums}
.rt-tbl th{font:500 10.5px var(--gx-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gx-muted);text-align:left;padding:0 18px 14px 0}
.rt-tbl td{padding:12px 18px 12px 0;color:var(--gx-navy)}
.rt-tbl tr:nth-child(2n) td{background:rgba(232,225,210,.55)}
.rt-tbl td:first-child{padding-left:12px}
.rt-tbl td.num{text-align:right;padding-right:14px}
.rt-tbl th.num{text-align:right;padding-right:14px}
.rt-wrap{overflow-x:auto}
.rt-note{font:11px var(--gx-mono);color:var(--gx-muted);margin-top:14px;letter-spacing:.04em}
@media (max-width:900px){
 .gx-docs{gap:56px!important;padding-bottom:40px!important}
 .gx-doc{transform:none!important;width:100%!important;max-width:none!important;box-shadow:0 18px 40px -22px rgba(31,27,22,.4)!important}
 .gx-doc .gx-doc-cap{position:static!important;margin:26px -22px -26px;padding:22px 2px 0;background:var(--gx-beige);font-family:Inter,system-ui,sans-serif}
}
@media (max-width:900px){.gx-doc .gx-stamp{top:14px;bottom:auto;right:14px;width:70px;height:70px}.gx-doc .dk-top .n{margin-right:70px}}

/* =====================================================================
   v4: words written in wheat, sunflower, soil and corn; tighter pages;
   the lot ticket (traceability)
   ===================================================================== */
/* descenders were clipped by the rising-line mask */
.gx-h1 .ln{padding-bottom:.2em!important;margin-bottom:-.14em}
/* textured words: the photograph shows through the letters */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
 .t-wheat,.t-sun,.t-soil,.t-corn{-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;background-size:cover;background-position:center;padding:0 .04em}
 .t-wheat{background-image:url(../images/tex-wheat.webp?v=2)}
 .t-sun{background-image:url(../images/tex-sun.webp?v=2)}
 .t-soil{background-image:url(../images/tex-soil.webp?v=2)}
 .t-corn{background-image:url(../images/tex-corn.webp?v=2)}
}
.cascade h1.t-wheat{animation:flick 1.9s steps(1,end) 2.16s forwards}

/* tighter rhythm */
.gx-hero{padding:clamp(120px,17vh,180px) 0 clamp(20px,4vh,50px)!important}
.gx-sec{padding:clamp(50px,7vw,100px) 0!important}
.gx-file{height:calc(var(--n,6) * 55vh + 100vh)!important}
.gx-file-pin{padding-top:40px!important}

/* ---------- traceability: one lot ticket that fills in as you scroll ---------- */
.gx-trace{position:relative;height:calc(var(--n,6) * 55vh + 100vh)}
.gx-trace-pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(30px,5vw,90px);max-width:1320px;margin:0 auto;padding:40px clamp(20px,4.5vw,64px) 0}
.tr-steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(10px,1.6vh,18px)}
.tr-st{display:grid;grid-template-columns:44px 1fr;column-gap:12px;opacity:.38;transition:opacity .45s}
.tr-st span{font:12px/2.4 var(--gx-mono);color:var(--gx-muted)}
.tr-st b{font-family:var(--gx-serif);font-weight:400;font-size:clamp(24px,2.6vw,38px);line-height:1.05;letter-spacing:-.02em}
.tr-st p{grid-column:2;margin:0;max-height:0;overflow:hidden;font-size:15.5px;line-height:1.5;color:var(--gx-navy2);transition:max-height .5s,margin .5s}
.tr-st.is-done{opacity:.7}
.tr-st.is-on{opacity:1}
.tr-st.is-on p{max-height:120px;margin-top:8px}
.tk{position:relative;justify-self:center;width:min(380px,100%);padding:56px 30px 30px;color:#2a1f16;border-radius:10px 10px 4px 4px;
 background:
  repeating-linear-gradient(97deg,rgba(255,255,255,.05) 0 2px,transparent 2px 5px),
  repeating-linear-gradient(7deg,rgba(80,50,20,.05) 0 1px,transparent 1px 4px),
  linear-gradient(160deg,#d6bd8e,#c5a674 60%,#bf9e6a);
 box-shadow:0 40px 70px -30px rgba(42,31,22,.55),inset 0 0 0 1px rgba(42,31,22,.12);transform:rotate(-2.5deg)}
.tk::before{content:"";position:absolute;top:18px;left:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--gx-beige);box-shadow:0 0 0 5px #e7d6b2,inset 0 1px 2px rgba(0,0,0,.25)}
.tk-h{display:flex;justify-content:space-between;align-items:center;font:10px var(--gx-mono);letter-spacing:.2em;text-transform:uppercase;margin-bottom:18px}
.tk-h img{height:13px;width:auto}
.tk-lot{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:14px 0;margin-bottom:6px;background:linear-gradient(#2a1f16,#2a1f16) 0 0/100% 2px no-repeat,linear-gradient(#2a1f16,#2a1f16) 0 100%/100% 2px no-repeat}
.tk-lot small{font:10px var(--gx-mono);letter-spacing:.2em;text-transform:uppercase}
.tk-lot b{font:600 24px var(--gx-mono);letter-spacing:.06em}
.tk-lot em{font:10px var(--gx-mono);letter-spacing:.16em;text-transform:uppercase;color:#7a2a20;font-style:normal}
.tk-rows{margin:0}
.tk-row{display:grid;grid-template-columns:104px 1fr;gap:10px;padding:7px 0;font-size:13px;line-height:1.3;opacity:.22;transition:opacity .4s}
.tk-row dt{font:10px/1.6 var(--gx-mono);letter-spacing:.12em;text-transform:uppercase;color:#5b4630}
.tk-row dd{margin:0;font-family:var(--gx-accent-serif);font-style:italic;font-size:19px;line-height:1.1;color:#1d2a5e;clip-path:inset(0 100% 0 0);transition:clip-path .9s steps(24,end)}
.tk-row.is-in{opacity:1}
.tk-row.is-in dd{clip-path:inset(0 0 0 0)}
.tk-bar{height:46px;margin-top:20px;background:repeating-linear-gradient(90deg,#2a1f16 0 2px,transparent 2px 4px,#2a1f16 4px 5px,transparent 5px 8px,#2a1f16 8px 11px,transparent 11px 13px)}
.tk-stamp{position:absolute;right:22px;bottom:84px;width:96px;height:96px;color:#7a2a20;opacity:0;transform:scale(1.6) rotate(12deg);transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1);mix-blend-mode:multiply}
.tk.is-done .tk-stamp{opacity:.85;transform:scale(1) rotate(12deg)}
.tk-stamp text{font:600 9.5px var(--gx-mono);letter-spacing:.2em;fill:currentColor}
@media (max-width:900px){
 .gx-trace{height:auto}
 .gx-trace-pin{position:static;height:auto;display:block;padding:0 clamp(20px,4.5vw,64px) 60px}
 .tr-st{opacity:1}.tr-st p{max-height:none;margin-top:6px}
 .tk{margin-top:50px}.tk-row{opacity:1}.tk-row dd{clip-path:none}.tk .tk-stamp{opacity:.85;transform:scale(1) rotate(12deg)}
}
@media (prefers-reduced-motion:reduce){.tk-row{opacity:1}.tk-row dd{clip-path:none;transition:none}}

/* =====================================================================
   v5: one texture per letter, tighter pages, traceability with photographs
   ===================================================================== */
.t-grain{background-image:url(../images/tex-grain.webp)}
.t-kernel{background-image:url(../images/tex-kernel.webp)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
 .t-grain,.t-kernel{-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;background-size:cover;background-position:center}
}
.tx .l{display:inline;padding:0 .08em;margin:0 -.08em}
.gx-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* less empty space: the pinned stories start right under the header */
.gx-hero{padding-bottom:clamp(10px,2vh,24px)!important}
.gx-file,.gx-trace{height:calc(var(--n,6) * 50vh + 100vh)!important}
.gx-file-pin,.gx-trace-pin{align-items:start!important;padding-top:clamp(90px,12vh,120px)!important}
.gx-docs{margin-top:10px}

/* traceability: photograph on one side, the lot ledger on the other */
.gx-trace-pin{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
.tr-media{position:relative;aspect-ratio:4/5;max-height:calc(100svh - 160px);width:100%;overflow:hidden;border-radius:4px;background:#2a241c}
.tr-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .9s ease,transform 6s ease}
.tr-media img.is-on{opacity:1;transform:scale(1)}
.tr-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,10,8,.65))}
.tr-cap{position:absolute;left:24px;right:24px;bottom:22px;z-index:2;color:#fff;display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.tr-cap b{font-family:var(--gx-serif);font-weight:400;font-size:clamp(28px,3vw,44px);line-height:1;letter-spacing:-.02em}
.tr-cap span{font:11px var(--gx-mono);letter-spacing:.2em;text-transform:uppercase;opacity:.85;white-space:nowrap}
.tr-side{display:flex;flex-direction:column;gap:26px;padding-top:6px}
.tr-txt{position:relative;min-height:120px}
.tr-txt p{position:absolute;inset:0 0 auto 0;margin:0;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--gx-navy2);opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}
.tr-txt p.is-on{opacity:1;transform:none}
.tr-lot{display:flex;align-items:baseline;gap:16px;font:11px var(--gx-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gx-muted)}
.tr-lot b{font:500 clamp(22px,2.2vw,30px) var(--gx-mono);letter-spacing:.04em;color:var(--gx-navy)}
.tr-ledger{display:grid;grid-template-columns:auto 1fr;gap:9px 26px;margin:0}
.tr-ledger dt{font:11px/1.9 var(--gx-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gx-muted);transition:color .4s}
.tr-ledger dd{margin:0;font-family:var(--gx-serif);font-size:clamp(17px,1.5vw,21px);line-height:1.3;color:var(--gx-navy);position:relative}
.tr-ledger dd .v{display:inline-block;clip-path:inset(0 100% 0 0);transition:clip-path .8s steps(22,end)}
.tr-ledger dd::before{content:"· · ·";position:absolute;left:0;color:#c4baa6;transition:opacity .3s}
.tr-ledger .is-in+dd .v,.tr-ledger dd.is-in .v{clip-path:inset(0 0 0 0)}
.tr-ledger dd.is-in::before{opacity:0}
.tr-ledger dt.is-in{color:var(--gx-navy)}
.tr-ledger dd.is-new{color:var(--gx-leaf)}
@media (max-width:900px){
 .gx-trace{height:auto!important}
 .gx-trace-pin{position:static!important;display:block!important;padding:10px clamp(20px,4.5vw,64px) 50px!important}
 .tr-media{aspect-ratio:4/3;margin-bottom:28px}
 .tr-txt{display:none}
 .tr-ledger dd .v{clip-path:none}.tr-ledger dd::before{opacity:0}.tr-ledger dt{color:var(--gx-navy)}
}

/* product and team pages: tighter rhythm */
body.hdr-navy .metal-page{--bleed:clamp(36px,5vw,64px)!important}
body.hdr-navy .metal-page .mp-stage{padding-bottom:clamp(16px,3vw,32px)!important}

/* =====================================================================
   v6: pinned sections without a trailing gap; map with one vessel at a
   time; traceability as a horizontal journey
   ===================================================================== */
.gx-file-pin{height:auto!important;min-height:0!important}
.gx-file{height:calc(var(--n,6) * 45vh + 78vh)!important}

/* map: no dots, labels light up with the route in play */
.rt-node circle,.rt-pulse,.rt-node.h{display:none!important}
.rt-node text{fill:#a59a86;transition:fill .4s}
.rt-node text.s{fill:#c2b8a5}
.rt-node.is-on text{fill:var(--gx-navy)}
.rt-node.is-on text.s{fill:var(--gx-leaf)}
.rt-j{fill:none;stroke:#e2d9c7;stroke-width:1.4;stroke-linecap:round}
.rt-j.is-on{stroke:var(--gx-navy);stroke-width:1.8}
.rt-j.road.is-on{stroke:var(--gx-leaf)}
.rt-mover{opacity:0;transition:opacity .35s}
.rt-mover.is-on{opacity:1}
.rt-cap{display:flex;flex-wrap:wrap;gap:8px 26px;margin:22px 0 0;font:12px var(--gx-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gx-muted);min-height:20px}
.rt-cap b{font-weight:500;color:var(--gx-navy)}

/* ---------- traceability: a horizontal journey ---------- */
.hz{position:relative}
.hz-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hz-track{display:flex;align-items:stretch;gap:clamp(30px,4vw,70px);height:100%;padding:clamp(96px,13vh,120px) clamp(20px,4.5vw,64px) clamp(30px,5vh,50px);will-change:transform;width:max-content}
.hz-p{position:relative;flex:0 0 auto;width:min(82vw,1180px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3.5vw,60px);align-items:center}
.hz-p--intro{width:min(70vw,980px);grid-template-columns:1fr;align-content:center}
.hz-p--intro .gx-h1{font-size:clamp(56px,10vw,170px)}
.hz-p--intro p{font-size:clamp(17px,1.45vw,20px);line-height:1.55;color:var(--gx-navy2);max-width:44ch;margin:28px 0 0}
.hz-go{display:inline-flex;align-items:center;gap:14px;margin-top:34px;font:11px var(--gx-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--gx-muted)}
.hz-go i{display:block;width:46px;height:1.5px;background:currentColor;position:relative;animation:hz-nudge 1.6s ease-in-out infinite}
.hz-go i::after{content:"";position:absolute;right:0;top:-3.5px;width:8px;height:8px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
@keyframes hz-nudge{50%{transform:translateX(8px)}}
.hz-num{position:absolute;right:-.04em;top:-.12em;z-index:0;font-family:var(--gx-serif);font-size:clamp(160px,24vw,360px);line-height:1;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.2px rgba(31,27,22,.16);pointer-events:none}
.hz-img{position:relative;z-index:1;margin:0;height:min(64vh,640px);overflow:hidden;border-radius:3px;background:#2a241c}
.hz-img img{position:absolute;top:0;left:-8%;width:116%;height:100%;object-fit:cover;will-change:transform}
.hz-body{position:relative;z-index:1}
.hz-step{font:11px var(--gx-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--gx-leaf);margin-bottom:18px}
.hz-body h3{font-family:var(--gx-serif);font-weight:400;font-size:clamp(40px,5vw,78px);line-height:.98;letter-spacing:-.035em;margin:0 0 22px}
.hz-body p{font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:var(--gx-navy2);max-width:40ch;margin:0 0 30px}
.hz-dl{display:grid;grid-template-columns:auto 1fr;gap:10px 26px;margin:0}
.hz-dl dt{font:11px/1.9 var(--gx-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gx-muted)}
.hz-dl dd{margin:0;font-family:var(--gx-serif);font-size:clamp(18px,1.5vw,22px);line-height:1.3}
.hz-p--end{width:min(76vw,1060px);grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.hz-p--end h3{font-family:var(--gx-serif);font-weight:400;font-size:clamp(50px,7vw,110px);line-height:.95;letter-spacing:-.04em;margin:0}
.hz-p--end .hz-dl{gap:8px 26px}
.hz-bar{position:absolute;left:clamp(20px,4.5vw,64px);right:clamp(20px,4.5vw,64px);bottom:clamp(14px,2.4vh,24px);display:flex;justify-content:space-between;font:11px var(--gx-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gx-muted);pointer-events:none}
.hz-bar b{font-weight:500;color:var(--gx-navy)}
@media (max-width:900px){
 .hz{height:auto!important}
 .hz-pin{position:static;height:auto;overflow:visible}
 .hz-track{flex-direction:column;width:auto;padding:110px clamp(20px,4.5vw,64px) 40px;gap:70px;transform:none!important}
 .hz-p,.hz-p--intro,.hz-p--end{width:auto;grid-template-columns:1fr}
 .hz-img{height:56vw}.hz-num{font-size:150px}.hz-go,.hz-bar{display:none}
}

.hz-img img{left:0!important;width:100%!important;transform:none!important}

/* =====================================================================
   v7: satellite route map, "from one ear to a cargo", team portraits
   ===================================================================== */
.sat{position:relative;background:#0b1a2e;color:#fff;overflow:hidden}
.sat-map{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sat-svg{display:block;width:100%;height:auto;min-width:880px}
.sat-svg .rt-j{fill:none;stroke:transparent;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sat-svg .rt-j.is-on{stroke:#fff;filter:drop-shadow(0 0 6px rgba(255,255,255,.55))}
.sat-svg .rt-j.road{stroke:rgba(255,230,170,.9);stroke-dasharray:10 9;stroke-width:2.6}
.sat-svg .rt-node rect{fill:#fff;opacity:.55;transition:opacity .4s}
.sat-svg .rt-node text{font:18px var(--gx-mono);letter-spacing:.06em;fill:rgba(255,255,255,.62);paint-order:stroke;stroke:rgba(5,15,30,.55);stroke-width:4px;transition:fill .4s}
.sat-svg .rt-node text.s{font-size:13px;letter-spacing:.14em;text-transform:uppercase;fill:rgba(255,255,255,.45)}
.sat-svg .rt-node.is-on rect,.sat-svg .rt-node.road rect{opacity:1}
.sat-svg .rt-node.is-on text,.sat-svg .rt-node.road text{fill:#fff}
.sat-svg .rt-node.is-on text.s{fill:#f0d48e}
.sat-svg .rt-strait{font-family:var(--gx-accent-serif);font-style:italic;font-size:30px;fill:#fff;paint-order:stroke;stroke:rgba(5,15,30,.5);stroke-width:4px}
.sat-svg .rt-mover{filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.sat-over{position:absolute;left:0;right:0;top:0;padding:clamp(28px,5vw,70px) clamp(20px,4.5vw,64px) 0;pointer-events:none;background:linear-gradient(180deg,rgba(5,12,24,.55),transparent)}
.sat-over .gx-h2{color:#fff;max-width:13ch;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.sat .rt-cap{color:rgba(255,255,255,.75);margin-top:18px}
.sat .rt-cap b{color:#fff}
.sat-credit{position:absolute;right:14px;bottom:10px;font:10px var(--gx-mono);letter-spacing:.06em;color:rgba(255,255,255,.6);max-width:60ch;text-align:right}
@media (max-width:900px){.sat-over{position:static;background:var(--gx-navy);padding:30px 20px 20px}.sat-credit{position:static;display:block;padding:8px 20px 14px;text-align:left}}

/* traceability: full-screen photographs that pull back, numbers that grow */
.zm{position:relative;height:calc(var(--n,5) * 70vh + 100vh)}
.zm-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#1a1712}
.zm-img{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.zm-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.28);transition:transform 2.6s cubic-bezier(.2,.7,.1,1)}
.zm-img.is-on{opacity:1}
.zm-img.is-on img{transform:scale(1)}
.zm-pin::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,9,7,.72) 0%,rgba(10,9,7,.35) 45%,transparent 75%),linear-gradient(0deg,rgba(10,9,7,.45),transparent 40%);pointer-events:none}
.zm-txt{position:absolute;z-index:2;left:clamp(20px,5vw,80px);bottom:clamp(40px,10vh,110px);right:clamp(20px,5vw,80px);color:#fff}
.zm-st{position:absolute;left:0;bottom:0;max-width:640px;opacity:0;transform:translateY(30px);transition:opacity .7s,transform .7s}
.zm-st.is-on{opacity:1;transform:none}
.zm-n{font-family:var(--gx-serif);font-weight:400;font-size:clamp(84px,14vw,220px);line-height:.85;letter-spacing:-.05em;display:flex;align-items:baseline;gap:.18em;flex-wrap:wrap}
.zm-n span{font:500 clamp(13px,1.2vw,16px) var(--gx-mono);letter-spacing:.2em;text-transform:uppercase;color:#f0d48e}
.zm-st p{font-size:clamp(17px,1.5vw,21px);line-height:1.5;margin:22px 0 0;max-width:38ch;color:rgba(255,255,255,.9)}
.zm-count{position:absolute;z-index:2;right:clamp(20px,5vw,80px);bottom:clamp(40px,10vh,110px);font:12px var(--gx-mono);letter-spacing:.22em;color:rgba(255,255,255,.7)}
.zm-count b{color:#fff;font-weight:500}
.zm-sum .gx-h2{margin-bottom:clamp(30px,4vw,50px)}
.zm-eq{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2.4vw,34px)}
.zm-eq div{display:flex;flex-direction:column;gap:8px}
.zm-eq b{font-family:var(--gx-serif);font-weight:400;font-size:clamp(40px,5.4vw,84px);line-height:1;letter-spacing:-.04em}
.zm-eq span{font:11px var(--gx-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gx-muted)}
.zm-eq i{font-style:normal;font-family:var(--gx-serif);font-size:clamp(30px,3.6vw,54px);color:var(--gx-leaf)}
@media (max-width:900px){.zm{height:auto}.zm-pin{position:relative;height:auto;background:none}.zm-pin::after{display:none}.zm-img{position:relative;opacity:1;height:62vw}.zm-img img{transform:none}.zm-txt{position:static;color:var(--gx-navy);padding:0 20px}.zm-st{position:static;opacity:1;transform:none;margin:24px 0 50px}.zm-st p{color:var(--gx-navy2)}.zm-n span{color:var(--gx-leaf)}.zm-count{display:none}
 .zm-pin{display:grid}.zm-img[data-s="0"]{order:0}}

/* team: two portraits, Artem on the left, Baran on the right */
.tm-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,26px);order:-1}
.tm-por{margin:0}
.tm-ph{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:3px;background:var(--gx-beige2)}
.tm-ph img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9)}
.tm-ini{display:none}
.tm-ph.is-empty .tm-ini{display:grid;place-items:center;position:absolute;inset:0;font-family:var(--gx-serif);font-size:clamp(120px,16vw,240px);line-height:1}
.tm-por figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:14px}
.tm-por figcaption b{font-family:var(--gx-serif);font-weight:400;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.02em}
.tm-por figcaption span{font:11px var(--gx-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gx-muted)}

.zm-n{white-space:nowrap;flex-wrap:nowrap!important;font-size:clamp(64px,10.5vw,190px)!important}
.zm-n span{white-space:normal}

/* =====================================================================
   v8: one photograph per word; about opens on the map; triptychs
   ===================================================================== */
.tx .l{padding:0;margin:0}
.t-ship{background-image:url(../images/tex-ship.webp)}
.t-port{background-image:url(../images/tex-port.webp)}
.t-truck{background-image:url(../images/tex-truck.webp)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
 .t-ship,.t-port,.t-truck{-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;background-size:cover;background-position:center}
}

/* map: the image and the drawing share one box, nothing shows around it */
.sat{background:none!important;margin-top:0}
.sat-box{position:relative;width:100%;min-width:880px;background:#0b1a2e url(../images/sat-region-2400.webp) center/100% 100% no-repeat}
.sat-box .sat-svg{position:absolute;inset:0;width:100%;height:100%;min-width:0}
.sat-svg .rt-j.is-on{stroke:#fff;stroke-width:1.4;stroke-opacity:.95;filter:drop-shadow(0 0 3px rgba(255,255,255,.45))}
.sat-svg .rt-j.road{stroke:rgba(255,236,190,.95);stroke-width:1.3;stroke-dasharray:6 6}
.sat-over{padding:clamp(100px,13vh,140px) clamp(20px,4.5vw,64px) 0!important;background:linear-gradient(180deg,rgba(5,12,24,.62),rgba(5,12,24,.25) 70%,transparent)!important}
.sat-h1{color:#fff!important;font-size:clamp(44px,6.6vw,112px)!important;text-shadow:0 2px 30px rgba(0,0,0,.3)}
.sat-lead{font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:rgba(255,255,255,.9);max-width:46ch;margin:22px 0 0}
.sat .rt-cap{margin-top:16px}
.sat-credit{bottom:10px!important}
@media (max-width:900px){.sat-over{padding:96px 20px 22px!important;background:var(--gx-navy)!important}.sat-h1{font-size:44px!important}}

/* request an offer: one column, either email or phone */
.gx-form-one{grid-template-columns:minmax(0,760px)!important}
.gx-either{margin:-4px 0 0;font-size:14px;color:var(--gx-muted)}

/* traceability triptychs */
.zm-pin::after{display:none!important}
.zm-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,9,7,.65),rgba(10,9,7,.25) 45%,transparent 75%),linear-gradient(0deg,rgba(10,9,7,.45),transparent 40%);pointer-events:none}
.zm-tri::after{background:linear-gradient(180deg,rgba(10,9,7,.55),transparent 35%,transparent 65%,rgba(10,9,7,.55))}
.zm-tri--light::after{display:none}
.zm-tri{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.zm-tri.zm-tri--light{background:var(--gx-beige);gap:0}
.zm-tri figure{position:relative;margin:0;overflow:hidden}
.zm-tri img{width:100%;height:100%;object-fit:cover;transform:scale(1.25);transition:transform 2.6s cubic-bezier(.2,.7,.1,1)}
.zm-tri--light img{object-fit:contain}
.zm-tri.is-on img{transform:scale(1)}
.zm-tri figcaption{position:absolute;z-index:2;left:clamp(14px,2vw,28px);bottom:clamp(40px,10vh,110px);color:#fff;display:flex;flex-direction:column;gap:6px}
.zm-tri figcaption span{font:11px var(--gx-mono);letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.zm-tri figcaption b{font-family:var(--gx-serif);font-weight:400;font-size:clamp(26px,3vw,46px);line-height:1;letter-spacing:-.02em}
.zm-tri--light figcaption{color:var(--gx-navy)}
.zm-txt{top:clamp(96px,13vh,130px)}
.zm-st--tri{top:0;bottom:auto}
.zm-h{font-family:var(--gx-serif);font-size:clamp(46px,6vw,96px);line-height:.95;letter-spacing:-.035em}
.zm-st--tri p{margin-top:14px}
.zm-pin.is-light .zm-st--tri,.zm-pin.is-light .zm-count{color:var(--gx-navy)}
.zm-pin.is-light .zm-count b{color:var(--gx-navy)}
.zm-pin.is-light .zm-st--tri p{color:var(--gx-navy2)}
@media (max-width:900px){.zm-tri{height:90vw!important}.zm-tri figcaption{bottom:14px}.zm-st--tri{color:var(--gx-navy)}}

.sat{padding:0!important}
.zm-tri figcaption b{text-transform:none!important}

/* =====================================================================
   v9: routes page on a fixed satellite map; drawn call to action;
   one-sentence enquiry
   ===================================================================== */
/* the map sits behind everything on the routes page, header and footer included */
body.on-map{background:#0b1a2e!important}
body.on-map .nav,body.on-map .nav.compact{background:rgba(243,240,232,.72)!important;-webkit-backdrop-filter:blur(14px) saturate(1.2)!important;backdrop-filter:blur(14px) saturate(1.2)!important}
body.on-map footer{position:relative;z-index:2;background:rgba(243,240,232,.78)!important;-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}
body.on-map main.gx{background:none}
.sat-fixed{position:fixed;inset:0;z-index:0}
.sat-fixed .sat-svg{position:absolute;inset:0;width:100%;height:100%;min-width:0}
.sat-page{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;padding:110px clamp(20px,4vw,56px) clamp(24px,5vh,48px);pointer-events:none}
.sat-card{pointer-events:auto;max-width:560px;padding:clamp(22px,2.4vw,34px);border-radius:8px;background:rgba(8,14,26,.42);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);color:#fff;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.sat-card .sat-h1{font-size:clamp(40px,4.8vw,80px)!important;color:#fff!important}
.sat-card .sat-lead{margin-top:16px}
.sat-card .rt-cap{margin-top:16px;color:rgba(255,255,255,.75);font-size:11px}
.sat-page .sat-credit{position:absolute;right:14px;bottom:8px;color:rgba(255,255,255,.65)}
.sat-svg .rt-j{fill:none;stroke:none}
.sat-svg .rt-j.is-on{stroke:#fff;stroke-width:1.3;stroke-opacity:.95;filter:drop-shadow(0 0 2.5px rgba(255,255,255,.6))}
.sat-svg .rt-j.road{stroke:rgba(255,236,190,.95);stroke-width:1.2;stroke-dasharray:5 5}
.sat-svg .rt-node circle{fill:#fff}
.sat-svg .rt-node rect{fill:rgba(8,14,26,.66);transition:fill .4s;stroke:none}
.sat-svg .rt-node text{font:19px var(--gx-mono);letter-spacing:.04em;fill:#fff;stroke:none;paint-order:normal}
.sat-svg .rt-node text.s{font-size:12px;letter-spacing:.12em;text-transform:uppercase;fill:rgba(255,255,255,.7)}
.sat-svg .rt-node.is-on rect{fill:rgba(243,240,232,.95)}
.sat-svg .rt-node.is-on text{fill:var(--gx-navy)}
.sat-svg .rt-node.is-on text.s{fill:var(--gx-leaf)}
.sat-svg .rt-strait{font-family:var(--gx-accent-serif);font-style:italic;font-size:24px;fill:#fff;stroke:rgba(5,15,30,.55);stroke-width:4px;paint-order:stroke}
.sat-svg .tv-ship .wake{fill:none;stroke:rgba(255,255,255,.55);stroke-width:.9}
.sat-svg .rt-mover{filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
@media (max-width:900px){.sat-page{align-items:flex-end}.sat-card{max-width:none}}

/* call to action: a drawn line, not a box */
.nav .nav-links>a.cta,body.hdr-navy .nav .nav-links>a.cta{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:6px 2px 8px!important;min-height:0!important;font-family:var(--gx-accent-serif)!important;font-style:italic!important;font-weight:400!important;font-size:19px!important;letter-spacing:0!important;position:relative;transform:none!important}
body.hdr-navy .nav .nav-links>a.cta{color:var(--gx-navy)!important}
.nav .nav-links>a.cta::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;background:var(--gx-leaf);transform-origin:left;transform:scaleX(.32);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.nav .nav-links>a.cta:hover::after,.nav .nav-links>a.cta[aria-current]::after{transform:scaleX(1)}
.nav .nav-links>a.cta svg{display:none!important}

/* request an offer: the sentence, then one button */
.gx-in.e{min-width:9ch}
@supports not (field-sizing:content){.gx-in.e{width:11ch}}
.gx-send-row{display:flex;align-items:center;gap:clamp(24px,4vw,56px);flex-wrap:wrap;margin-top:clamp(40px,6vw,70px)}
.gx-send-row .gx-consent{margin:0;max-width:34ch}
.gx-send2{position:relative;width:clamp(110px,10vw,140px);aspect-ratio:1;border-radius:50%;border:0;cursor:pointer;background:var(--gx-navy);color:var(--gx-beige);font-family:var(--gx-accent-serif);font-style:italic;font-size:clamp(24px,2.2vw,30px);display:grid;place-items:center;transition:transform .5s cubic-bezier(.2,.7,.2,1),background .4s}
.gx-send2::after{content:"";position:absolute;inset:-10px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--gx-leaf);opacity:0;transform:scale(.85);transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
.gx-send2:hover{transform:scale(1.06);background:var(--gx-leaf)}
.gx-send2:hover::after{opacity:1;transform:none}
/* traceability: the seeds sit on white */
.zm-tri.zm-tri--light{background:#fff}

body.has-scene:not(.hdr-navy) .nav .nav-links>a.cta{color:#fff!important}
body.has-scene:not(.hdr-navy) .nav.compact .nav-links>a.cta{color:inherit!important}
.zm-count{top:clamp(96px,13vh,130px);bottom:auto!important}

/* =====================================================================
   v10: execution documents, sober map, transparent bars, call to action
   ===================================================================== */
/* documents */
.gx-doc{font-family:'Times New Roman',Georgia,serif;font-size:10.5px;line-height:1.35;color:#1b1b19;padding:20px 20px 22px}
.dk-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:9px;margin-bottom:9px;border-bottom:1.5px solid #1b1b19}
.dk-org{display:flex;flex-direction:column;gap:2px}
.dk-org b{font:700 15px/1 Georgia,serif;letter-spacing:.08em}
.dk-org img{height:13px;width:auto}
.dk-org span{font:8px Arial,Helvetica,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#4a4842}
.dk-ref{font:700 11px/1.2 Arial,Helvetica,sans-serif;text-transform:uppercase;letter-spacing:.04em;text-align:right}
.dk-ref small{display:block;font-weight:400;font-size:8.5px;color:#4a4842;margin-top:2px;text-transform:none}
.dk-title{font:700 8.5px/1.35 Arial,Helvetica,sans-serif;text-transform:uppercase;letter-spacing:.03em;text-align:center;margin:0 0 8px}
.dk-lines p{display:flex;gap:8px;align-items:baseline;margin:0;padding:4px 0;border-bottom:.5px dotted #8a857a}
.dk-lines span{font:600 8px Arial,Helvetica,sans-serif;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;min-width:92px}
.dk-lines i,.dk-grid i,.dk-bl i{font-family:var(--gx-accent-serif);font-style:italic;font-size:14px;line-height:1.05;color:#1f3c88}
.dk-lines .dk-small{border:0;font-size:9px;color:#3d3b36}
.dk-small{font-size:8.6px;line-height:1.4;color:#3d3b36;margin:7px 0 0}
.dk-sig{display:flex;justify-content:space-between;gap:14px;margin-top:12px;font:600 7.2px Arial,Helvetica,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#4a4842}
.dk-sig span{flex:1;padding-top:20px;background:linear-gradient(#1b1b19,#1b1b19) 0 18px/100% .8px no-repeat}
.dk-grid{display:grid;grid-template-columns:1fr 1fr;border:.8px solid #1b1b19;margin-top:6px}
.dk-grid.one{grid-template-columns:1fr}
.dk-grid>div{padding:4px 6px;border-right:.8px solid #1b1b19;border-bottom:.8px solid #1b1b19;min-height:28px}
.dk-grid>div:nth-child(2n){border-right:0}
.dk-grid.one>div{border-right:0}
.dk-grid>.w{grid-column:1/-1;border-right:0}
.dk-grid>div:last-child,.dk-grid>div:nth-last-child(2):not(.w):nth-child(odd){border-bottom:0}
.dk-grid b{display:block;font:600 6.8px/1.2 Arial,Helvetica,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#4a4842;margin-bottom:2px}
.dk-tb{width:100%;border-collapse:collapse;font-size:9.5px;margin-top:7px}
.dk-tb th,.dk-tb td{border:.8px solid #1b1b19;padding:3px 5px;text-align:left}
.dk-tb th{font:600 6.8px Arial,Helvetica,sans-serif;text-transform:uppercase;letter-spacing:.05em;color:#4a4842;background:#f0ebde}
.dk-tb .tot td{font-weight:700}
.dk-center{text-align:center;margin-bottom:6px}
.dk-center b{display:block;font:700 13px Georgia,serif;letter-spacing:.12em;text-transform:uppercase}
.dk-center small{font:8.5px Arial,Helvetica,sans-serif;color:#4a4842}
.dk-sec{font:700 8px Arial,Helvetica,sans-serif;text-transform:uppercase;letter-spacing:.06em;margin:8px 0 0}
.dk-swifthead{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1.5px solid #1b1b19;padding-bottom:7px;margin-bottom:7px}
.dk-swifthead b{font:700 14px Arial,Helvetica,sans-serif;letter-spacing:.1em}
.dk-swifthead span{font:8px Arial,Helvetica,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:#4a4842}
.dk-swift{margin:0;font:8.6px/1.42 'Courier New',Courier,monospace;color:#1b1b19;white-space:pre;overflow:hidden}
.dk-bl{display:grid;grid-template-columns:1.1fr 1fr;border:.8px solid #1b1b19}
.dk-bl-l>div{padding:4px 6px;border-bottom:.8px solid #1b1b19;min-height:30px}
.dk-bl-l>div:last-child{border-bottom:0}
.dk-bl-r{border-left:.8px solid #1b1b19;padding:6px 8px}
.dk-bl-r>div{margin-top:4px}
.dk-bl b{display:block;font:600 6.8px Arial,Helvetica,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#4a4842}
.dk-big{font:700 15px Georgia,serif;letter-spacing:.06em;text-transform:uppercase;margin:0}
.dk-code{font:700 7.5px Arial,Helvetica,sans-serif;letter-spacing:.08em;margin:6px 0 0}
.gx-doc .gx-stamp{width:86px;height:86px;right:14px;bottom:30px}

/* map: transparent bars, sober labels, caption without a box */
body.on-map .nav,body.on-map .nav.compact{background:rgba(6,12,22,.22)!important;-webkit-backdrop-filter:blur(3px)!important;backdrop-filter:blur(3px)!important}
body.on-map .nav .brand img.logo-on-light{display:none!important}
body.on-map .nav .brand img.logo-on-dark{display:block!important}
body.on-map .nav .nav-links>a:not(.cta),body.on-map .nav .drop>button{color:rgba(255,255,255,.9)!important;text-shadow:0 1px 8px rgba(0,0,0,.4)}
body.on-map .nav .nav-links>a.cta{color:#fff!important}
body.on-map .nav .burger span{background:#fff!important}
body.on-map footer{background:rgba(6,12,22,.38)!important;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
body.on-map footer p,body.on-map footer div,body.on-map footer span,body.on-map footer address{color:rgba(255,255,255,.72)!important}
body.on-map footer h4,body.on-map footer a,body.on-map footer a .fn{color:#fff!important}
.sat-svg .rt-node text{font:17px var(--gx-mono)!important;letter-spacing:.05em;fill:rgba(255,255,255,.92)!important;stroke:rgba(4,10,20,.75)!important;stroke-width:3.5px!important;paint-order:stroke!important}
.sat-svg .rt-node text.s{font-size:11px!important;fill:rgba(255,255,255,.62)!important;stroke-width:3px!important}
.sat-svg .rt-node.is-on text{fill:#fff!important}
.sat-svg .rt-node.is-on text.s{fill:#f0d48e!important}
.sat-svg .rt-node circle{fill:#fff;opacity:.85}
.sat-page{align-items:flex-end}
.sat-page>.rt-cap{pointer-events:none;margin:0;color:#fff;font:12px var(--gx-mono);letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 3px rgba(0,0,0,.8),0 0 14px rgba(0,0,0,.6)}
.sat-page>.rt-cap b{color:#f0d48e}

/* call to action in the bar: an outlined pill that fills from the left, a grain-gold dot */
.nav .nav-links>a.cta,body.hdr-navy .nav .nav-links>a.cta{font-family:Inter,system-ui,sans-serif!important;font-style:normal!important;font-weight:600!important;font-size:12.5px!important;letter-spacing:.08em!important;text-transform:uppercase!important;padding:11px 18px 11px 32px!important;border-radius:999px!important;box-shadow:inset 0 0 0 1.4px currentColor!important;overflow:hidden;isolation:isolate;transition:color .35s!important}
.nav .nav-links>a.cta::before{content:"";position:absolute;left:15px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--gx-gold);animation:gx-pulse 2.4s ease-in-out infinite}
.nav .nav-links>a.cta::after{left:0!important;right:0!important;top:0!important;bottom:0!important;height:auto!important;z-index:-1;background:currentColor!important;transform:scaleX(0)!important;transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)!important;opacity:.12}
.nav .nav-links>a.cta:hover::after{transform:scaleX(1)!important}
@keyframes gx-pulse{0%,100%{box-shadow:0 0 0 0 rgba(195,141,47,.5)}50%{box-shadow:0 0 0 5px rgba(195,141,47,0)}}

body.hdr-navy .metal-page .mp-all,body.hdr-navy .metal-page .mp-all *{border:0!important;box-shadow:none!important}
.sat-page{align-items:flex-start;padding-top:96px}


/* =====================================================================
   v11: call to action as a certificate frame, custom pickers, team split
   ===================================================================== */
/* call to action: ink block with an inner gold rule, like a certificate */
.nav .nav-links>a.cta,body.hdr-navy .nav .nav-links>a.cta{font-family:var(--gx-serif)!important;font-style:normal!important;font-weight:500!important;font-size:15px!important;letter-spacing:.01em!important;text-transform:none!important;padding:12px 22px!important;border-radius:0!important;background:var(--gx-navy)!important;color:var(--gx-beige)!important;box-shadow:none!important;outline:1px solid var(--gx-gold);outline-offset:-5px;transition:background .3s,outline-offset .3s!important}
.nav .nav-links>a.cta::before,.nav .nav-links>a.cta::after{display:none!important;content:none!important}
.nav .nav-links>a.cta:hover{background:#2c251c!important;outline-offset:-3px}
body.on-map .nav .nav-links>a.cta,body.has-scene:not(.hdr-navy) .nav .nav-links>a.cta{background:rgba(31,27,22,.85)!important;color:#fff!important}

/* textured words: let the photograph cover descenders and ascenders */
.t-wheat,.t-sun,.t-soil,.t-corn,.t-grain,.t-kernel,.t-ship,.t-port,.t-truck{padding:.14em .06em .3em;margin:-.14em -.06em -.3em}
.gx-h1 .ln{padding-bottom:.28em!important;margin-bottom:-.2em}

/* pickers in the enquiry sentence */
.gx-pick{position:relative;display:inline-block}
.gx-pick-b{cursor:pointer;text-align:left;padding-right:.62em!important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231f1b16' stroke-width='1.6'/%3E%3C/svg%3E") right .05em center/.34em no-repeat!important}
.gx-pick-b.is-empty{color:#b8af9b}
.gx-pick-native{position:absolute!important;left:0;bottom:0;width:1px!important;height:1px!important;opacity:0;pointer-events:none}
.gx-pick-l{position:absolute;z-index:20;top:calc(100% + 10px);left:-.3em;min-width:calc(100% + .6em);display:none;flex-direction:column;padding:.25em;background:var(--gx-paper);border-radius:6px;box-shadow:0 24px 50px -18px rgba(31,27,22,.45),0 0 0 1px rgba(31,27,22,.06);font-size:.52em;line-height:1.2;white-space:nowrap}
.gx-pick.is-open .gx-pick-l{display:flex;animation:gx-pop .18s ease-out}
@keyframes gx-pop{from{opacity:0;transform:translateY(-6px)}}
.gx-pick-o{padding:.38em .7em;border-radius:4px;cursor:pointer;color:var(--gx-navy)}
.gx-pick-o:hover,.gx-pick-o:focus{background:var(--gx-beige2);outline:0}
.gx-pick-o.is-on{color:var(--gx-leaf)}

/* team: the screen split in two */
.tm-page{padding-top:78px}
.tm-split{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100svh - 78px)}
.tm-half{display:flex;flex-direction:column}
.tm-half .tm-ph{aspect-ratio:auto;flex:1 1 auto;min-height:56vh;border-radius:0}
.tm-half:first-child .tm-ph{background:#e2dbcb}
.tm-half:last-child .tm-ph{background:#d8cfbb}
.tm-info{padding:clamp(24px,3vw,44px) clamp(20px,4vw,56px) clamp(30px,4vw,56px)}
.tm-role{display:block;font:500 11px var(--gx-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--gx-leaf);margin-bottom:12px}
.tm-info h2{font-family:var(--gx-serif);font-weight:400;font-size:clamp(46px,5.4vw,88px);line-height:.95;letter-spacing:-.035em;margin:0}
.tm-lang{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 0;padding:0;list-style:none}
.tm-lang li{font:11px var(--gx-mono);letter-spacing:.14em;text-transform:uppercase;padding:7px 11px;border-radius:999px;background:var(--gx-beige2);color:var(--gx-navy)}
.tm-info p{font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:var(--gx-navy2);max-width:42ch;margin:20px 0 0}
.tm-quote{padding:clamp(70px,10vw,140px) clamp(20px,6vw,90px);text-align:center}
.tm-quote blockquote{margin:0 auto;max-width:22ch}
.tm-quote p{font-family:var(--gx-accent-serif);font-style:italic;font-size:clamp(38px,5.4vw,86px);line-height:1.05;letter-spacing:-.01em;margin:0;color:var(--gx-navy)}
.tm-quote footer{margin-top:28px;font:500 11px var(--gx-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--gx-muted);background:none!important;border:0!important}
@media (max-width:760px){.tm-split{grid-template-columns:1fr}.tm-half .tm-ph{min-height:70vw}}

/* grain step: the page beige, not white */
.zm-tri.zm-tri--light{background:var(--gx-beige)!important}

.tm-page{padding-top:0!important}
.tm-split{min-height:0!important}
.tm-half .tm-ph{flex:none!important;height:min(64vh,640px);min-height:0!important}
.tm-ph.is-empty .tm-ini{font-size:clamp(140px,18vw,280px)}
.tm-quote blockquote{max-width:min(1000px,92vw)!important}
.tm-split{padding:0!important}


/* =====================================================================
   v12: the call to action is an order ticket
   ===================================================================== */
.nav .nav-links>a.cta,body.hdr-navy .nav .nav-links>a.cta,body.on-map .nav .nav-links>a.cta,body.has-scene:not(.hdr-navy) .nav .nav-links>a.cta{display:inline-flex!important;align-items:stretch;gap:0;padding:0!important;background:none!important;outline:0!important;box-shadow:none!important;border-radius:3px!important;overflow:hidden;font-family:var(--gx-mono)!important;font-style:normal!important;font-weight:500!important;font-size:11.5px!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:#fff!important;transform:none!important}
.ord-side{display:flex;align-items:center;gap:7px;padding:11px 11px;background:#111511;color:#3ddc84}
.ord-side i{width:6px;height:6px;border-radius:50%;background:#3ddc84;box-shadow:0 0 8px #3ddc84;animation:ord-blink 1.6s steps(2,end) infinite}
.ord-txt{position:relative;display:flex;align-items:center;padding:11px 16px;background:#1e5c3a;color:#fff;transition:background .2s}
.ord-txt::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:#2f8a57;transition:width .35s cubic-bezier(.2,.7,.2,1);z-index:0}
.ord-txt b{position:relative;z-index:1;font-weight:500}
.nav .nav-links>a.cta:hover .ord-txt::after{width:100%}
.nav .nav-links>a.cta:active{transform:translateY(1px)!important}
.nav .nav-links>a.cta.is-filled .ord-txt{background:#3ddc84;color:#0d150f}
.nav .nav-links>a.cta.is-filled .ord-txt::after{width:0}
.nav .nav-links>a.cta.is-filled .ord-side{color:#fff}
@keyframes ord-blink{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.ord-side i{animation:none}}


/* =====================================================================
   v13: the order button, plain, like the buy button of a trading screen
   ===================================================================== */
.nav .nav-links>a.cta,body.hdr-navy .nav .nav-links>a.cta,body.on-map .nav .nav-links>a.cta,body.has-scene:not(.hdr-navy) .nav .nav-links>a.cta{background:#127a4a!important;border-radius:2px!important;font-family:Inter,system-ui,sans-serif!important;font-size:13px!important;letter-spacing:.01em!important;text-transform:none!important;font-weight:600!important;color:#fff!important;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)!important;transition:background .15s!important}
.nav .nav-links>a.cta:hover{background:#0f6a40!important}
.ord-side{padding:10px 12px 10px 14px;background:none;color:#fff;font-weight:700;letter-spacing:.08em;font-size:11.5px;border-right:1px solid rgba(255,255,255,.28)}
.ord-side i{display:none}
.ord-txt{padding:10px 15px 10px 13px;background:none}
.ord-txt::after{display:none}
.nav .nav-links>a.cta.is-filled{background:#0b5233!important}
.nav .nav-links>a.cta.is-filled .ord-txt{background:none;color:#fff}


/* =====================================================================
   v14: the call to action, institutional: ink block, square corners
   ===================================================================== */
.nav .nav-links>a.cta,body.hdr-navy .nav .nav-links>a.cta,body.on-map .nav .nav-links>a.cta,body.has-scene:not(.hdr-navy) .nav .nav-links>a.cta{display:inline-flex!important;align-items:center;padding:12px 20px!important;background:var(--gx-navy)!important;color:var(--gx-beige)!important;border-radius:0!important;box-shadow:none!important;outline:0!important;font-family:Inter,system-ui,sans-serif!important;font-weight:600!important;font-size:11.5px!important;letter-spacing:.16em!important;text-transform:uppercase!important;transition:background .2s!important}
.nav .nav-links>a.cta:hover{background:#3a2f22!important}
body.has-scene:not(.hdr-navy) .nav .nav-links>a.cta,body.on-map .nav .nav-links>a.cta{background:#f3f0e8!important;color:var(--gx-navy)!important}
body.has-scene:not(.hdr-navy) .nav .nav-links>a.cta:hover,body.on-map .nav .nav-links>a.cta:hover{background:#fff!important}

/* home: one plain line under the headline */
.hero-in .hero-sub{margin:18px 0 0;max-width:46ch;font-size:clamp(16px,1.5vw,21px);line-height:1.5;color:rgba(255,255,255,.88);text-shadow:0 1px 18px rgba(0,0,0,.45)}

/* =====================================================================
   v15: mobile pass
   ===================================================================== */
/* the SPECIMEN watermark no longer spills out of the page */
.gx-doc{overflow:hidden}
/* a slightly larger wordmark, everywhere */
.brand img.logo,.site-hdr .brand img.logo{height:28px!important}
.nav.compact .brand img.logo,.site-hdr .nav.compact .brand img.logo{height:26px!important}
@media (max-width:1100px){.brand img.logo,.nav.compact .brand img.logo,.site-hdr .brand img.logo,.site-hdr .nav.compact .brand img.logo{height:24px!important}}
@media (max-width:420px){.brand img.logo,.nav.compact .brand img.logo,.site-hdr .brand img.logo,.site-hdr .nav.compact .brand img.logo{height:21px!important}}
@media (max-width:340px){.brand img.logo,.nav.compact .brand img.logo,.site-hdr .brand img.logo,.site-hdr .nav.compact .brand img.logo{height:19px!important}}
/* phones: the 3D heap had no height left once the desktop ratio was switched off */
@media (max-width:760px){.metal-page .mp-shot.mp-shot--grain{height:min(68vw,360px)!important;padding-top:0!important;aspect-ratio:auto!important;margin:8px 0 4px}}
/* phones: traceability alternates photo, then its words */
@media (max-width:900px){
 .zm-pin{display:flex!important;flex-direction:column}
 .zm-txt{display:contents!important}
 .zm-img[data-s="0"]{order:0}.zm-st[data-s="0"]{order:1}.zm-img[data-s="1"]{order:2}.zm-st[data-s="1"]{order:3}.zm-img[data-s="2"]{order:4}.zm-st[data-s="2"]{order:5}
 .zm-img[data-s="3"]{order:6}.zm-st[data-s="3"]{order:7}.zm-img[data-s="4"]{order:8}.zm-st[data-s="4"]{order:9}.zm-img[data-s="5"]{order:10}.zm-st[data-s="5"]{order:11}
 .zm-st{padding:0 20px;margin:22px 0 44px!important}
 .zm-eq{gap:10px 16px}.zm-eq i{font-size:26px}
}
/* how we trade on phones: the masks over the thread take the page beige; bigger opening words */
body.hdr-navy .row-title h2,body.hdr-navy .row-body .lede,body.hdr-navy .lead p{background:var(--gx-beige)!important}
@media (max-width:760px){body.hdr-navy .cascade span,body.hdr-navy .cascade h1{font-size:clamp(64px,19vw,110px)!important}}

/* phone numbers */
.tm-tel{display:inline-block;margin-top:14px;font:500 15px var(--gx-mono);letter-spacing:.04em;color:var(--gx-navy);text-decoration:none;border-bottom:1px solid var(--gx-leaf);padding-bottom:2px}
.gx-call{margin:22px 0 0;font-size:14px;color:var(--gx-muted)}
.gx-call a{color:var(--gx-navy);font-family:var(--gx-mono);font-size:13.5px;white-space:nowrap}

/* the wordmark is a comfortable tap target */
.nav .brand{display:flex!important;align-items:center;min-height:44px}

/* =====================================================================
   v16: large screens use the room, with the same proportions
   ===================================================================== */
@media (min-width:1800px){
 .nav-in,.site-hdr .nav-in{max-width:1640px!important}
 .gx-wrap{max-width:1640px}
 .wrap{max-width:1500px}
 .wrap-narrow{max-width:1000px}
 .brand img.logo,.site-hdr .brand img.logo,.nav.compact .brand img.logo{height:32px!important}
 .nav .nav-links>a:not(.cta),.nav .drop>button,.site-hdr .nav-links>a:not(.cta),.site-hdr .drop>button{font-size:16px!important}
 .nav .nav-links>a.cta{font-size:12.5px!important;padding:14px 24px!important}
 .gx-p,.sat-lead,.tm-info p,.mp-body p,.zm-st p{font-size:22px!important}
 .mp-lead{font-size:clamp(26px,1.9vw,38px)!important}
 footer,footer p,footer a{font-size:15px}
 .gx-doc{width:min(470px,80%)!important;font-size:11.5px}
 .sat-svg .rt-node text{font-size:18px!important}
}
@media (min-width:2300px){
 .nav-in,.site-hdr .nav-in{max-width:2000px!important}
 .gx-wrap,.mp-wrap{max-width:2000px!important}
 .wrap{max-width:1800px}
 .wrap-narrow{max-width:1180px}
 .brand img.logo,.site-hdr .brand img.logo,.nav.compact .brand img.logo{height:38px!important}
 .nav .nav-links>a:not(.cta),.nav .drop>button,.site-hdr .nav-links>a:not(.cta),.site-hdr .drop>button{font-size:18px!important}
 .nav .nav-links>a.cta{font-size:14px!important;padding:16px 28px!important}
 .gx-p,.sat-lead,.tm-info p,.mp-body p,.zm-st p,.prose p{font-size:25px!important}
 .gx-h1,.gx-hero h1.gx-h1{font-size:clamp(50px,7.4vw,210px)!important}
 footer,footer p,footer a{font-size:17px}
 .gx-doc{width:min(540px,80%)!important;font-size:13px}
}

/* home on large screens: the port fills the screen height */
@media (min-width:1500px){body.has-scene .hero{min-height:min(100svh,1300px)}}


/* =====================================================================
   v17: phones get the same stories as the desktop
   ===================================================================== */
/* how we trade: thread in the middle, title on the left, words on the right */
@media (max-width:900px){
 body.hdr-navy .threaded .grid.row{display:grid!important;grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr)!important;gap:0 12px!important;padding-left:14px!important;padding-right:14px!important;align-items:start}
 body.hdr-navy .threaded .row .row-title{grid-column:1!important;justify-self:end!important;text-align:right!important;max-width:none!important;width:100%}
 body.hdr-navy .threaded .row .node{grid-column:2!important;justify-self:center!important;width:32px!important;height:32px!important;font-size:9px!important;margin-top:2px}
 body.hdr-navy .threaded .row .row-body{grid-column:3!important;justify-self:start!important;text-align:left!important;max-width:none!important;width:100%}
 body.hdr-navy .threaded .row-title h2{font-size:clamp(22px,7vw,30px)!important;margin:0!important;padding:0!important;background:none!important;max-width:none!important;line-height:1.05}
 body.hdr-navy .threaded .row-body .lede{font-size:13.5px!important;line-height:1.45!important;padding:0!important;background:none!important}
 body.hdr-navy .threaded .row{padding-top:58px!important}
}

/* execution: the documents still land one by one, pinned under the header */
@media (max-width:900px){
 .gx-file{height:calc(var(--n,6) * 60vh + 100vh)!important}
 .gx-file .gx-file-pin{position:sticky!important;top:0;height:100vh!important;height:100svh!important;display:flex!important;flex-direction:column;padding:84px 18px 18px!important;gap:6px}
 .gx-file .gx-file-txt{display:block!important;position:relative;min-height:168px;flex:none}
 .gx-file .gx-ctl{top:0}
 .gx-file .gx-ctl h3{font-size:28px;margin-bottom:10px}
 .gx-file .gx-ctl p{font-size:14px;line-height:1.5}
 .gx-file .gx-docs{position:relative!important;flex:1 1 auto;height:auto!important;display:block!important;gap:0!important;padding:0!important;margin:0}
 .gx-file .gx-doc{position:absolute!important;top:50%!important;left:50%!important;width:min(340px,86vw)!important;max-width:none!important;transform:translate(-50%,-50%) translate(0,90vh) rotate(var(--r)) scale(.86)!important;transition:transform .9s cubic-bezier(.2,.75,.15,1)!important}
 .gx-file .gx-doc.is-in{transform:translate(-50%,-50%) translate(calc(var(--x) * .4),calc(var(--y) * .4)) rotate(var(--r)) scale(.86)!important}
 .gx-file .gx-doc .gx-doc-cap{display:none!important}
 .gx-file .gx-doc .gx-stamp{opacity:0;transform:scale(1.6) rotate(-14deg)}
 .gx-file .gx-doc.is-in .gx-stamp{opacity:.88;transform:scale(1) rotate(-14deg)}
}

/* traceability: full-screen photographs that change as you scroll */
@media (max-width:900px){
 .zm{height:calc(var(--n,6) * 70vh + 100vh)!important}
 .zm .zm-pin{position:sticky!important;top:0;height:100vh!important;height:100svh!important;display:block!important;overflow:hidden;background:#1a1712}
 .zm .zm-img{position:absolute!important;inset:0!important;height:auto!important;opacity:0;order:0}
 .zm .zm-img.is-on{opacity:1}
 .zm .zm-img img{transform:scale(1.25)!important}
 .zm .zm-img.is-on img{transform:scale(1)!important}
 .zm .zm-tri{height:auto!important;gap:2px}
 .zm .zm-tri figcaption{bottom:22px;left:10px}
 .zm .zm-tri figcaption span{font-size:9px;letter-spacing:.12em}
 .zm .zm-tri figcaption b{font-size:19px}
 .zm .zm-txt{display:block!important;position:absolute!important;left:18px;right:18px;top:84px;bottom:110px;color:#fff}
 .zm .zm-st{position:absolute!important;left:0;right:0;bottom:0;margin:0!important;padding:0!important;opacity:0;transform:translateY(20px)}
 .zm .zm-st.is-on{opacity:1;transform:none}
 .zm .zm-st--tri{top:0;bottom:auto}
 .zm .zm-st p{color:rgba(255,255,255,.92);font-size:15px}
 .zm .zm-st--tri p{color:rgba(255,255,255,.92)}
 .zm .zm-h{font-size:40px}
 .zm .zm-n{font-size:clamp(54px,16vw,84px)!important}
 .zm .zm-n span{color:#f0d48e!important}
 .zm .zm-count{display:block!important;top:auto!important;bottom:22px!important;right:18px}
 .zm .zm-pin.is-light .zm-st--tri,.zm .zm-pin.is-light .zm-st--tri p{color:var(--gx-navy)!important}
}

/* request an offer: a consent box you can hit with a thumb */
.gx-consent input{width:22px;height:22px;flex:none}
.gx-send-row .gx-consent{min-height:44px;align-items:center}
@media (max-width:900px){
 .gx-file .gx-file-pin{align-items:stretch!important}
 .gx-file .gx-file-txt,.gx-file .gx-docs{width:100%!important;align-self:stretch!important}
 .gx-file .gx-file-txt{min-height:clamp(190px,30vh,240px)}
 .zm .zm-count{display:none!important}
}

/* =====================================================================
   v18: phones, tighter vertical rhythm
   ===================================================================== */
@media (max-width:760px){
 .gx-hero{padding-top:92px!important}
 .metal-page .mp-flow{padding-top:28px!important;padding-bottom:36px!important}
 .metal-page .mp-flow>*+*{margin-top:40px!important}
 .metal-page .mp-flow>section,.metal-page .mp-flow>nav{padding-top:0!important;padding-bottom:0!important}
 .metal-page .mp-grades li{padding-top:10px!important;padding-bottom:10px!important}
 .metal-page .mp-grades-sec .mp-h,.metal-page .mp-all .mp-h{margin-bottom:12px!important}
 body.hdr-legal .phero+section,body.hdr-legal main>section{padding-top:36px!important}
 body.hdr-legal .phero-plain .phero-in{padding-bottom:28px!important}
}
/* tablets: the same tighter rhythm */
@media (min-width:761px) and (max-width:1100px){
 .gx-hero{padding-top:104px!important}
 body.hdr-navy .metal-page{--bleed:44px!important}
 .metal-page .mp-stage{padding-bottom:10px!important;min-height:0!important}
 .metal-page .mp-flow{padding-top:24px!important;padding-bottom:40px!important}
 .metal-page .mp-flow>*+*{margin-top:52px!important}
 .metal-page .mp-flow>section,.metal-page .mp-flow>nav{padding-top:0!important;padding-bottom:0!important}
 body.hdr-legal main>section{padding-top:44px!important}
 body.hdr-legal .phero-plain .phero-in{padding-bottom:32px!important}
}

/* emails */
.tm-tel+.tm-tel{display:block;width:max-content;margin-top:8px;font-size:13.5px}
.gx-call{line-height:1.8}
.gx-p a[href^="mailto:"]{color:var(--gx-navy);text-decoration:underline;text-decoration-color:var(--gx-leaf);text-underline-offset:3px;word-break:break-all}
footer a[href^="mailto:"]{word-break:break-all}

.gx-call .gx-who{display:flex;flex-wrap:wrap;gap:2px 14px;align-items:baseline;margin-top:8px}
.gx-call .gx-who b{font-weight:500;color:var(--gx-navy);min-width:52px}


/* =====================================================================
   v19: shorter scroll, headline against the ship, clean line breaks
   ===================================================================== */
/* words and emails never split in the middle */
.nw{white-space:nowrap}
a[href^="mailto:"],footer a[href^="mailto:"],.gx-p a[href^="mailto:"]{word-break:normal!important;overflow-wrap:normal!important}

/* home: the headline sits in the open sea above the hull */
body.has-scene .hero{align-items:flex-start!important}
body.has-scene .hero-in{padding-top:clamp(150px,29vh,420px)!important;padding-bottom:0!important}
@media (max-width:820px) and (orientation:portrait){
 body.has-scene .hero-in{padding-top:max(108px,27svh)!important}
}
@media (max-height:600px) and (orientation:landscape){
 body.has-scene .hero-in{padding-top:96px!important}
}

/* pinned stories: same steps, less distance to travel */
.gx-file{height:calc(var(--n,6) * 34vh + 100vh)!important}
.zm{height:calc(var(--n,6) * 40vh + 100vh)!important}
@media (max-width:900px){
 .gx-file{height:calc(var(--n,6) * 32vh + 100vh)!important}
 .zm{height:calc(var(--n,6) * 36vh + 100vh)!important}
}

/* team: the portraits do not fill a whole phone screen each */
@media (max-width:760px){
 .tm-half .tm-ph{height:62vw!important;min-height:0!important}
 .tm-ph.is-empty .tm-ini{font-size:34vw!important}
}

/* legal: credits fold */
.gx-fold{margin:34px 0 0}
.gx-fold summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px}
.gx-fold summary::-webkit-details-marker{display:none}
.gx-fold summary h2{margin:0!important}
.gx-fold summary::after{content:"+";font:300 28px/1 var(--gx-serif);color:var(--gx-leaf);transition:transform .3s}
.gx-fold[open] summary::after{transform:rotate(45deg)}
.gx-fold ul{margin-top:14px}

/* request an offer: a strip of ripe wheat, the words in clear white */
.nav .nav-links>a.cta,body.hdr-navy .nav .nav-links>a.cta,body.on-map .nav .nav-links>a.cta,body.has-scene:not(.hdr-navy) .nav .nav-links>a.cta,body.has-scene .nav.compact .nav-links>a.cta{
 position:relative;display:inline-flex!important;align-items:center;justify-content:center;
 padding:13px 22px!important;border-radius:2px!important;outline:0!important;
 background:linear-gradient(100deg,rgba(26,20,12,.78),rgba(26,20,12,.52)),url(../images/cta-wheat.webp) center 42%/cover no-repeat,#3a2f22!important;
 color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.55);
 box-shadow:inset 0 0 0 1px rgba(240,212,142,.55),0 6px 18px -10px rgba(0,0,0,.6)!important;
 font-family:Inter,system-ui,sans-serif!important;font-weight:600!important;font-size:11.5px!important;letter-spacing:.16em!important;text-transform:uppercase!important;
 transition:background-position .6s ease,box-shadow .3s!important}
.nav .nav-links>a.cta:hover,body.has-scene:not(.hdr-navy) .nav .nav-links>a.cta:hover,body.on-map .nav .nav-links>a.cta:hover{background-position:0 0,center 60%,0 0!important;box-shadow:inset 0 0 0 1px rgba(240,212,142,.95),0 8px 22px -10px rgba(0,0,0,.7)!important}
.nav .nav-links>a.cta::before,.nav .nav-links>a.cta::after{display:none!important;content:none!important}
@media (min-width:1800px){.nav .nav-links>a.cta,body.hdr-navy .nav .nav-links>a.cta,body.has-scene:not(.hdr-navy) .nav .nav-links>a.cta{font-size:12.5px!important;padding:15px 26px!important}}
@media (min-width:2300px){.nav .nav-links>a.cta,body.hdr-navy .nav .nav-links>a.cta,body.has-scene:not(.hdr-navy) .nav .nav-links>a.cta{font-size:14px!important;padding:17px 30px!important}}
@media (max-width:1080px){.nav .nav-links>a.cta,body.hdr-navy .nav .nav-links>a.cta,body.has-scene:not(.hdr-navy) .nav .nav-links>a.cta,body.on-map .nav .nav-links>a.cta{justify-content:center;width:100%;padding:18px 22px!important;font-size:13px!important}}
.site-hdr .nav .nav-links>a.cta,.site-hdr .nav .nav-links>a.cta:hover,.site-hdr .nav .nav-links>a.cta:active{color:#fff!important;transform:none!important}
/* the blanks in the enquiry sentence read clearly, still lighter than what you type */
.gx-in::placeholder{color:#8c7d61!important;opacity:1}
.gx-pick-b.is-empty{color:#8c7d61!important}
/* home: the sea fills the first screen at every size */
body.has-scene .hero{min-height:100vh;min-height:100svh}
/* How we trade: the harvest words lead straight into the text, no empty screen between */
.threaded>.hero{min-height:0!important;height:auto!important;padding-top:clamp(104px,15vh,190px)!important;padding-bottom:clamp(8px,2vh,24px)!important;align-items:flex-start!important}
.threaded>.lead{padding-top:clamp(22px,3vh,40px)!important}
@media (max-width:900px){.knot-section{height:125vh!important}}
/* its footer: links run along the line instead of one per row */
@media (max-width:900px){
 .foot .foot-contact:last-child p{display:flex;flex-wrap:wrap;gap:4px 16px}
 .foot .foot-contact:last-child p br{display:none}
}
.tm-role{color:#7a5214!important}

/* v20: the button photograph follows the page; it fits inside the phone menu */
.nav .nav-links>a.cta,body.hdr-navy .nav .nav-links>a.cta,body.on-map .nav .nav-links>a.cta,body.has-scene:not(.hdr-navy) .nav .nav-links>a.cta,body.has-scene .nav.compact .nav-links>a.cta,.site-hdr .nav .nav-links>a.cta{
 background:linear-gradient(100deg,rgba(26,20,12,.8),rgba(26,20,12,.5)),var(--cta-img,url(../images/cta-wheat.webp)) center/cover no-repeat,#3a2f22!important;box-sizing:border-box!important}
.nav .nav-links>a.cta:hover,.nav .nav-links>a.cta:active,.nav .nav-links>a.cta:focus,body.has-scene .nav .nav-links>a.cta:hover,body.has-scene .nav .nav-links>a.cta:active,body.on-map .nav .nav-links>a.cta:hover{
 background:linear-gradient(100deg,rgba(26,20,12,.66),rgba(26,20,12,.36)),var(--cta-img,url(../images/cta-wheat.webp)) center/cover no-repeat,#3a2f22!important;color:#fff!important}
@media (max-width:1080px){
 .nav .nav-links>a.cta,body.hdr-navy .nav .nav-links>a.cta,body.has-scene .nav .nav-links>a.cta,body.on-map .nav .nav-links>a.cta,.site-hdr .nav .nav-links>a.cta{width:auto!important;max-width:calc(100% - 44px)!important;margin:16px 22px!important;align-self:stretch;display:flex!important}
}

/* back to a page: no entrance animation, everything already in place */
html.gx-back [data-reveal],html.gx-back .metal-page [data-reveal],html.gx-back .gx-r,html.gx-back .gx-never li{opacity:1!important;transform:none!important;transition:none!important}
/* Flows: the phone menu sheet is beige, so its links go back to ink */
@media (max-width:1080px){
 body.on-map .nav .nav-links.open>a:not(.cta),body.on-map .nav .nav-links.open .drop>button,body.on-map .nav .nav-links.open .drop-menu a{color:var(--gx-navy)!important;text-shadow:none!important}
}
/* How we trade: once the reader moves, the opening is over and every word is simply there */
html.hwt-skip .intro{display:none!important}
html.hwt-skip .site-hdr,html.hwt-skip .bar,html.hwt-skip .eyebrow,html.hwt-skip .lead p,html.hwt-skip .cascade h1{animation:none!important;opacity:1!important;pointer-events:auto}
html.hwt-skip .cascade span:nth-child(1){animation:sway 5.5s ease-in-out infinite!important;opacity:1!important}
html.hwt-skip .cascade span:nth-child(2){animation:sway 5.5s ease-in-out .6s infinite!important;opacity:1!important}
/* the knot needs room to come undone before "settled" lands */
@media (max-width:900px){.knot-section{height:175vh!important}}

/* reveals: shorter, so text is readable the moment it is on screen */
html.js .metal-page [data-reveal]{transition-duration:.45s!important}
.gx-r{transition-duration:.45s!important}

/* a phone number always stays on one line */
a[href^="tel:"]{white-space:nowrap!important}

/* v61: phones and emails read as plain text, no underline; a colour change on hover is enough */
a[href^="mailto:"],a[href^="tel:"],.tm-tel,.cinfo a,.gx-call a,.gx-p a[href^="mailto:"],footer a[href^="mailto:"],footer a[href^="tel:"]{text-decoration:none!important;border-bottom:0!important;padding-bottom:0!important;box-shadow:none!important;background-image:none!important}
a[href^="mailto:"]:hover,a[href^="tel:"]:hover,.cinfo a:hover{color:var(--gx-leaf)!important;text-decoration:none!important}