/* =================================================================
   AGRIBORA COMPANY LIMITED — customer-facing site
   Identity: "Formal Trade House" — deep forest fields, gold hairlines,
   cream paper, Fraunces display + Inter + IBM Plex Mono ledger numerals.
   ================================================================= */

:root{
  /* forest — the dominant surface */
  --forest-900:#102a20;
  --forest-800:#143026;
  --forest-700:#1b4332;
  --forest-600:#2d5a43;
  --forest-500:#2d6a4f;
  /* leaf accents on dark */
  --leaf-400:#74c69d;
  --leaf-300:#a7d9bf;
  /* gold — precise metallic accent only */
  --gold-700:#7e6316;
  --gold-600:#9a7a1c;
  --gold-500:#c9a227;
  --gold-400:#d9b53f;
  --gold-300:#e6c454;
  /* paper */
  --cream:#f6f3ea;
  --paper:#fbfaf4;
  --tint:#ebf0e7;
  /* ink */
  --ink:#1d2a23;
  --muted:#5b6b60;
  --line:#ded8c7;
  --line-2:#e8e3d4;
  /* on forest */
  --invert:#f4f0e4;
  --invert-muted:rgba(244,240,228,.72);
  --line-dark:rgba(244,240,228,.16);

  --font-display:'Fraunces','Georgia','Times New Roman',serif;
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --wrap:1140px;
  --gutter:clamp(20px,5vw,56px);
  --nav-h:74px;
  --radius:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--font-sans);
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  font-size:clamp(16px,1.05vw,17px);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
.sprite{position:absolute}
.ic{width:24px;height:24px;display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;flex:none}
.ic--sm{width:18px;height:18px}
.mono{font-family:var(--font-mono);font-feature-settings:"tnum"}

.skip-link{position:absolute;left:-999px;top:0;background:var(--forest-700);color:var(--invert);
  padding:10px 16px;z-index:200;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

:focus-visible{outline:2.5px solid var(--gold-500);outline-offset:3px;border-radius:3px}

/* ---------- shared layout ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:840px}

.section{padding:clamp(72px,9.5vw,128px) 0;position:relative}
.section--paper{background:var(--paper)}
.section--tint{background:var(--tint)}
.section--forest{
  background:
    radial-gradient(120% 120% at 85% -10%, var(--forest-600) 0%, transparent 55%),
    linear-gradient(160deg,var(--forest-800),var(--forest-900));
  color:var(--invert);
}
.section--forest .h2{color:var(--invert)}

/* ---------- type system ---------- */
.eyebrow{
  font-family:var(--font-sans);
  font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-600);display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold-500);display:inline-block}
.eyebrow--gold{color:var(--gold-400)}
.eyebrow--gold::before{background:var(--gold-400)}
.eyebrow .ic{color:var(--gold-500)}

.h2{
  font-family:var(--font-display);
  font-optical-sizing:auto;
  font-weight:500;
  font-size:clamp(28px,4.1vw,46px);
  line-height:1.08;
  letter-spacing:-.01em;
  color:var(--forest-800);
  max-width:18ch;
}
.lead{font-size:clamp(18px,1.7vw,21px);line-height:1.5;color:var(--forest-700);max-width:46ch;margin-top:22px}
.lead--invert{color:var(--invert)}
.body{font-size:clamp(15.5px,1.1vw,17px);color:var(--muted);max-width:62ch;margin-top:16px}
.section--forest .body{color:var(--invert-muted)}
.lede{max-width:64ch}
.lede--invert .lead{color:var(--invert)}

/* =================================================================
   NAV
   ================================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  background:rgba(246,243,234,.82);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.nav.is-scrolled{background:rgba(246,243,234,.96);border-bottom-color:var(--line);box-shadow:0 6px 26px rgba(16,42,32,.07)}
.nav__inner{max-width:1240px;margin-inline:auto;height:100%;padding-inline:clamp(18px,4vw,40px);
  display:flex;align-items:center;justify-content:space-between;gap:20px}

.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand__mark{width:40px;height:40px;object-fit:contain}
.brand__word{font-family:var(--font-display);font-weight:600;font-size:21px;line-height:1;
  color:var(--forest-800);display:flex;flex-direction:column;gap:2px}
.brand__sub{font-family:var(--font-sans);font-weight:500;font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-600)}

.nav__links{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav__links a{font-size:14.5px;font-weight:500;color:var(--forest-700);position:relative;padding:6px 0;
  transition:color .2s}
.nav__links a:not(.nav__cta)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--gold-500);transition:right .28s var(--ease)}
.nav__links a:not(.nav__cta):hover{color:var(--forest-900)}
.nav__links a:not(.nav__cta):hover::after,.nav__links a.is-active::after{right:0}
.nav__cta{background:var(--forest-700);color:var(--invert)!important;padding:10px 18px!important;border-radius:9px;
  font-weight:600;transition:background .2s,transform .2s}
.nav__cta:hover{background:var(--forest-900);transform:translateY(-1px)}

.nav__toggle{display:none;background:none;border:1px solid var(--line);border-radius:9px;
  width:44px;height:44px;color:var(--forest-700);cursor:pointer;align-items:center;justify-content:center}

/* =================================================================
   BUTTONS
   ================================================================= */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-sans);font-weight:600;
  font-size:15px;padding:14px 24px;border-radius:10px;cursor:pointer;border:1px solid transparent;
  transition:transform .2s var(--ease),background .2s,box-shadow .2s,border-color .2s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn--gold{background:var(--gold-500);color:var(--forest-900);box-shadow:0 8px 22px rgba(201,162,39,.28)}
.btn--gold:hover{background:var(--gold-400);transform:translateY(-2px);box-shadow:0 12px 30px rgba(201,162,39,.34)}
.btn--ghost{background:transparent;color:var(--invert);border-color:var(--line-dark)}
.btn--ghost:hover{border-color:var(--leaf-400);background:rgba(116,198,157,.08);transform:translateY(-2px)}
.btn--whatsapp{background:rgba(116,198,157,.12);color:var(--leaf-300);border-color:rgba(116,198,157,.35);margin-top:26px}
.btn--whatsapp:hover{background:rgba(116,198,157,.2);transform:translateY(-2px)}
.btn--block{width:100%;justify-content:center;margin-top:6px}

/* =================================================================
   HERO
   ================================================================= */
.hero{
  position:relative;overflow:hidden;
  min-height:clamp(600px,90vh,840px);
  padding:calc(var(--nav-h) + clamp(40px,9vh,90px)) var(--gutter) clamp(64px,9vh,96px);
  display:flex;flex-direction:column;justify-content:center;
  background:
    radial-gradient(130% 100% at 78% -5%, var(--forest-500) 0%, transparent 50%),
    linear-gradient(155deg,var(--forest-800) 0%,var(--forest-900) 70%);
  color:var(--invert);
}
.hero__field{position:absolute;inset:0;color:var(--gold-500);opacity:.16;pointer-events:none}
.contours{width:100%;height:100%}
.hero__field::after{content:"";position:absolute;inset:0;
  background:radial-gradient(80% 60% at 20% 90%,rgba(116,198,157,.18),transparent 60%)}

.hero__inner{position:relative;max-width:var(--wrap);margin-inline:auto;width:100%}
.hero__h{
  font-family:var(--font-display);font-optical-sizing:auto;font-weight:500;
  font-size:clamp(40px,7.2vw,80px);line-height:1.02;letter-spacing:-.02em;
  margin:10px 0 0;max-width:16ch;
}
.hero__h em{font-style:italic;font-weight:400;color:var(--gold-400)}
.hero__sub{font-size:clamp(17px,1.7vw,21px);line-height:1.55;color:var(--invert-muted);
  max-width:54ch;margin-top:26px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.hero__trust{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:42px;
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.02em;color:var(--invert-muted)}
.hero__trust b{color:var(--gold-300);font-weight:500}
.hero__trust .dot{color:var(--line-dark)}

.hero__scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  width:26px;height:42px;border:1.5px solid var(--line-dark);border-radius:14px;display:flex;justify-content:center;padding-top:7px}
.hero__scroll-line{width:2px;height:8px;background:var(--gold-400);border-radius:2px;animation:scrollcue 1.9s var(--ease) infinite}
@keyframes scrollcue{0%{opacity:0;transform:translateY(-2px)}40%{opacity:1}80%{opacity:0;transform:translateY(11px)}}

/* =================================================================
   STAT STRIP — forest plinth under the hero
   ================================================================= */
.stats{background:var(--forest-700);border-top:2px solid var(--gold-500)}
.stats__inner{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:30px 22px;text-align:center;border-right:1px solid var(--line-dark)}
.stat:last-child{border-right:none}
.stat__n{display:block;font-family:var(--font-display);font-weight:500;font-size:clamp(22px,2.6vw,30px);
  color:var(--gold-400);line-height:1}
.stat__l{display:block;margin-top:9px;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--invert-muted)}

/* =================================================================
   VALUE CHAIN — the signature
   ================================================================= */
.route{margin-top:clamp(48px,6vw,76px)}
.route__cap{font-family:var(--font-sans);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-600);margin-bottom:14px;text-align:center}
.route__ribbon{width:100%;height:120px;display:block;color:var(--gold-500)}
.route__vein{stroke:var(--gold-500);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:1500;stroke-dashoffset:1500}
.route.is-visible .route__vein{animation:draw 1.9s var(--ease) .15s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.route__seed{fill:var(--gold-400);filter:drop-shadow(0 0 6px rgba(201,162,39,.6))}

.route__stations{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,30px);
  margin-top:-18px}
.station{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 26px 28px;text-align:center}
.station__step{position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:13px;font-weight:500;color:var(--gold-600);
  background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:4px 12px}
.station__ic{width:56px;height:56px;margin:6px auto 16px;border-radius:50%;display:grid;place-items:center;
  background:var(--tint);color:var(--forest-600)}
.station__ic .ic{width:26px;height:26px}
.station__h{font-family:var(--font-display);font-weight:600;font-size:21px;color:var(--forest-800)}
.station__sub{font-size:12.5px;letter-spacing:.04em;color:var(--gold-700);font-weight:600;margin-top:4px}
.station__body{font-size:14.5px;color:var(--muted);margin-top:12px}

/* =================================================================
   WHAT WE TRADE
   ================================================================= */
.trade{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(18px,2.4vw,28px);margin-top:clamp(40px,5vw,60px)}
.trade__primary{background:
    radial-gradient(120% 120% at 100% 0%, var(--forest-500) 0%, transparent 55%),
    linear-gradient(160deg,var(--forest-700),var(--forest-900));
  color:var(--invert);border-radius:var(--radius);padding:clamp(30px,3.4vw,46px);
  display:flex;flex-direction:column;position:relative;overflow:hidden}
.trade__primary::after{content:"";position:absolute;right:-40px;bottom:-50px;width:230px;height:230px;
  background:radial-gradient(closest-side,rgba(201,162,39,.18),transparent);pointer-events:none}
.trade__tag{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-400);font-weight:600}
.trade__h{font-family:var(--font-display);font-weight:500;font-size:clamp(26px,3vw,36px);
  color:var(--invert);margin-top:14px;line-height:1.05}
.trade__body{color:var(--invert-muted);margin-top:18px;font-size:15.5px;max-width:48ch}
.trade__body strong{color:var(--leaf-300);font-weight:600}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin-top:auto;padding-top:26px}
.chips li{font-family:var(--font-mono);font-size:12px;color:var(--leaf-300);
  border:1px solid var(--line-dark);border-radius:30px;padding:6px 13px}

.trade__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,20px)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(16,42,32,.09);border-color:var(--gold-400)}
.card__ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:var(--tint);color:var(--forest-600);margin-bottom:16px}
.card__kicker{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-600);font-weight:600}
.card__h{font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--forest-800);margin-top:5px}
.card__body{font-size:14px;color:var(--muted);margin-top:8px}

/* =================================================================
   WHY — pillars on forest
   ================================================================= */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px);margin-top:clamp(40px,5vw,58px)}
.pillar{padding-top:26px;border-top:2px solid var(--gold-500)}
.pillar__ic{width:50px;height:50px;border-radius:12px;display:grid;place-items:center;
  background:rgba(116,198,157,.1);color:var(--leaf-400);margin-bottom:18px}
.pillar__h{font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--invert)}
.pillar__body{font-size:14.5px;color:var(--invert-muted);margin-top:11px}

/* =================================================================
   SUSTAINABILITY
   ================================================================= */
.sus{display:grid;grid-template-columns:1.2fr .9fr;gap:clamp(28px,5vw,72px);align-items:center}
.sus__text .body{max-width:52ch}
.pledge{position:relative;background:
    radial-gradient(120% 120% at 0% 0%, var(--forest-500) 0%, transparent 60%),
    linear-gradient(160deg,var(--forest-700),var(--forest-900));
  color:var(--invert);border-radius:18px;padding:clamp(30px,3.5vw,44px);overflow:hidden}
.pledge__ic{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;
  background:rgba(116,198,157,.14);color:var(--leaf-400);margin-bottom:20px}
.pledge__ic .ic{width:28px;height:28px}
.pledge__lead{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-400);font-weight:600}
.pledge__big{font-family:var(--font-display);font-weight:500;font-size:clamp(24px,2.7vw,32px);
  line-height:1.12;margin-top:10px;color:var(--invert)}
.pledge__sub{font-size:14.5px;color:var(--invert-muted);margin-top:14px}

/* =================================================================
   CREDENTIALS — the mono ledger
   ================================================================= */
.ledger{margin-top:clamp(34px,4vw,48px);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--paper)}
.ledger__row{display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding:18px clamp(20px,3vw,32px);border-bottom:1px solid var(--line-2)}
.ledger__row:nth-child(odd){background:rgba(235,240,231,.5)}
.ledger__row:last-child{border-bottom:none}
.ledger__row dt{font-size:14px;color:var(--muted)}
.ledger__row dd{font-size:14.5px;color:var(--forest-800);font-weight:600;text-align:right}
.ledger__row dd.mono{font-weight:500;letter-spacing:-.01em;color:var(--forest-700)}
.ledger__note{margin-top:18px;font-size:13px;color:var(--muted);font-style:italic;text-align:center}

/* =================================================================
   LOCATIONS
   ================================================================= */
.loc{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(16px,2.5vw,30px);align-items:stretch;
  margin-top:clamp(40px,5vw,58px)}
.loc__card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(26px,3vw,36px)}
.loc__card--primary{border-color:var(--gold-400);box-shadow:0 14px 36px rgba(16,42,32,.07)}
.loc__head{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.loc__pin{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;
  background:var(--tint);color:var(--forest-600)}
.loc__role{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-600);font-weight:600}
.loc__city{font-family:var(--font-display);font-weight:600;font-size:clamp(24px,3vw,32px);color:var(--forest-800)}
.loc__body{font-size:14.5px;color:var(--muted);margin-top:12px}

.loc__route{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  min-width:120px;color:var(--gold-600)}
.loc__node{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--forest-700)}
.loc__node .ic{color:var(--gold-600)}
.loc__line{width:0;height:64px;border-left:2px dashed var(--gold-500);margin:4px 0}
.loc__dist{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;color:var(--muted);margin-top:4px}

/* =================================================================
   CONTACT
   ================================================================= */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.contact__list{list-style:none;margin-top:30px;display:flex;flex-direction:column;gap:16px}
.contact__list li{display:flex;align-items:flex-start;gap:14px;font-size:15px;color:var(--invert)}
.contact__list b{font-weight:600}
.contact__list a{border-bottom:1px solid var(--line-dark);transition:border-color .2s}
.contact__list a:hover{border-color:var(--leaf-400)}
.contact__ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:rgba(116,198,157,.1);color:var(--leaf-400)}

.contact__form{background:var(--paper);border-radius:18px;padding:clamp(26px,3.4vw,40px);
  box-shadow:0 24px 60px rgba(16,42,32,.28)}
.form__title{font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--forest-800);margin-bottom:22px}
.field{margin-bottom:16px}
.field label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--forest-700);margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--font-sans);font-size:15px;color:var(--ink);
  background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:12px 14px;transition:border-color .2s,box-shadow .2s}
.field textarea{resize:vertical;min-height:96px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold-500);
  box-shadow:0 0 0 3px rgba(201,162,39,.16)}
.field input::placeholder,.field textarea::placeholder{color:#a4a99e}
.form__note{font-size:12.5px;color:var(--muted);margin-top:12px;text-align:center}
.form__note.is-error{color:#b23b2e;font-weight:500}

/* =================================================================
   FOOTER
   ================================================================= */
.footer{background:linear-gradient(180deg,var(--forest-900),#0c2018);color:var(--invert)}
.footer__slogan{text-align:center;padding:clamp(44px,6vw,68px) var(--gutter) clamp(34px,4vw,46px);
  border-bottom:1px solid var(--line-dark)}
.footer__leaf{color:var(--gold-400);display:flex;justify-content:center;margin-bottom:14px}
.footer__leaf .ic{width:30px;height:30px}
.footer__motto{font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(22px,3.2vw,32px);color:var(--gold-300)}
.footer__motsub{font-size:13px;color:var(--invert-muted);margin-top:8px;letter-spacing:.03em}

.footer__main{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:32px;
  padding-top:clamp(40px,5vw,56px);padding-bottom:clamp(34px,4vw,46px)}
.footer__seal{display:inline-grid;place-items:center;width:104px;height:104px;border-radius:16px;
  background:var(--cream);padding:14px}
.footer__seal img{width:76px;height:76px;object-fit:contain}
.footer__col-h{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-400);
  font-weight:600;margin-bottom:16px}
.footer__nav{display:flex;flex-direction:column;gap:11px}
.footer__nav a{font-size:14.5px;color:var(--invert-muted);transition:color .2s,padding-left .2s}
.footer__nav a:hover{color:var(--leaf-300);padding-left:4px}
.footer__contact p{font-size:14px;color:var(--invert-muted);margin-bottom:9px}
.footer__contact a:hover{color:var(--leaf-300)}

.footer__legal{border-top:1px solid var(--line-dark);padding:22px var(--gutter);
  max-width:1240px;margin-inline:auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
.footer__legal p{font-size:12px;color:var(--invert-muted)}
.footer__legal .mono{font-size:11.5px;letter-spacing:-.01em}

/* =================================================================
   BACK TO TOP
   ================================================================= */
.totop{position:fixed;right:22px;bottom:22px;z-index:90;width:48px;height:48px;border-radius:50%;
  background:var(--forest-700);color:var(--invert);border:none;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 10px 28px rgba(16,42,32,.28);opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s,visibility .3s,transform .3s,background .2s}
.totop.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.totop:hover{background:var(--forest-900)}

/* =================================================================
   REVEAL ON SCROLL
   ================================================================= */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width:980px){
  .trade{grid-template-columns:1fr}
  .sus{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .footer__main{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1 / -1}
}
@media (max-width:860px){
  :root{--nav-h:62px}
  .nav__toggle{display:flex}
  .nav__links{position:fixed;top:var(--nav-h);left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--cream);
    border-bottom:1px solid var(--line);padding:8px var(--gutter) 18px;
    transform:translateY(-12px);opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s;
    box-shadow:0 18px 40px rgba(16,42,32,.12);max-height:calc(100vh - var(--nav-h));overflow-y:auto}
  .nav__links.is-open{transform:none;opacity:1;visibility:visible}
  .nav__links a{padding:14px 0;border-bottom:1px solid var(--line-2);font-size:16px}
  .nav__links a:not(.nav__cta)::after{display:none}
  .nav__cta{text-align:center;margin-top:12px;border-bottom:none!important}
  .route__ribbon{display:none}
  .route__stations{grid-template-columns:1fr;gap:30px;margin-top:18px}
  .pillars{grid-template-columns:1fr 1fr}
  .loc{grid-template-columns:1fr}
  .loc__route{flex-direction:row;min-height:72px;gap:14px;flex-wrap:wrap}
  .loc__line{width:64px;height:0;border-left:none;border-top:2px dashed var(--gold-500);margin:0}
  .loc__dist{flex-basis:100%;text-align:center;margin-top:0}
}
@media (max-width:560px){
  .stats__inner{grid-template-columns:1fr 1fr}
  .stat{border-right:none;border-bottom:1px solid var(--line-dark)}
  .stat:nth-child(odd){border-right:1px solid var(--line-dark)}
  .trade__grid{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr}
  .footer__main{grid-template-columns:1fr}
  .footer__legal{flex-direction:column}
  .hero__cta .btn{flex:1 1 auto;justify-content:center}
  .ledger__row{flex-direction:column;gap:4px}
  .ledger__row dd{text-align:left}
}

/* =================================================================
   REDUCED MOTION
   ================================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .route__vein{stroke-dashoffset:0}
  .route__seed{display:none}
  .hero__scroll-line{display:none}
}

/* =================================================================
   3D HERO + MOTION LAYER
   ================================================================= */

/* top scroll-progress */
.scrollbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--gold-600),var(--gold-400) 60%,var(--gold-300));
  box-shadow:0 0 4px rgba(201,162,39,.25);transition:width .08s linear;pointer-events:none}

/* hero stacking: contour(0) < canvas/fallback(1) < content(2) */
.hero__field{z-index:0}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:0;pointer-events:none}
.hero__leaf-fallback{position:absolute;right:6%;top:50%;transform:translateY(-50%);
  width:min(38vw,360px);height:auto;z-index:1;opacity:.9;pointer-events:none;
  filter:drop-shadow(0 14px 42px rgba(201,162,39,.3))}
.hero__leaf-fallback.is-hidden{display:none}
.hero__inner{z-index:2}
.hero__scroll{z-index:2}
.webgl-on .hero__field{opacity:.1}
@media (max-width:760px){
  .hero__leaf-fallback{right:50%;transform:translate(50%,-50%);width:64vw;opacity:.3}
}

/* hero entrance (progressive: gated on .js, only before is-loaded) */
.js .hero__inner > *{opacity:0;transform:translateY(22px)}
.js body.is-loaded .hero__inner > *{opacity:1;transform:none;
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js body.is-loaded .hero__inner > *:nth-child(1){transition-delay:.05s}
.js body.is-loaded .hero__inner > *:nth-child(2){transition-delay:.18s}
.js body.is-loaded .hero__inner > *:nth-child(3){transition-delay:.31s}
.js body.is-loaded .hero__inner > *:nth-child(4){transition-delay:.44s}
.js body.is-loaded .hero__inner > *:nth-child(5){transition-delay:.57s}

/* stat plinth stagger */
.js .stats .stat{opacity:0;transform:translateY(14px)}
.js .stats.in .stat{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js .stats.in .stat:nth-child(2){transition-delay:.08s}
.js .stats.in .stat:nth-child(3){transition-delay:.16s}
.js .stats.in .stat:nth-child(4){transition-delay:.24s}

/* section eyebrows draw their gold hairline on reveal */
.reveal .eyebrow::before{width:0;transition:width .6s var(--ease) .15s}
.reveal.is-visible .eyebrow::before{width:26px}

/* credentials ledger: mono numerals 'tabulate' settle, staggered */
.js .ledger.reveal.is-visible .ledger__row:nth-child(1) .mono{animation:tabulate .7s var(--ease) .12s both}
.js .ledger.reveal.is-visible .ledger__row:nth-child(2) .mono{animation:tabulate .7s var(--ease) .24s both}
.js .ledger.reveal.is-visible .ledger__row:nth-child(3) .mono{animation:tabulate .7s var(--ease) .36s both}
@keyframes tabulate{from{filter:blur(5px);opacity:.15;letter-spacing:.12em}to{filter:blur(0);opacity:1;letter-spacing:-.01em}}

/* locations connector: a gold mote travels the line once on reveal (desktop) */
.loc__line{position:relative}
.loc__line::after{content:"";position:absolute;left:50%;top:0;width:7px;height:7px;border-radius:50%;
  background:var(--gold-400);box-shadow:0 0 9px rgba(201,162,39,.8);transform:translate(-50%,-4px);opacity:0}
.loc.reveal.is-visible .loc__line::after{animation:mote 1.7s var(--ease) .5s 1}
@keyframes mote{0%{opacity:0;top:0}15%{opacity:1}85%{opacity:1}100%{opacity:0;top:100%}}

/* nav brand: one-time gold sheen when the header first sticks */
.brand{position:relative}
.brand.brand-sheen::after{content:"";position:absolute;inset:-4px;pointer-events:none;border-radius:8px;
  background:linear-gradient(115deg,transparent 38%,rgba(201,162,39,.45) 50%,transparent 62%);
  background-size:260% 100%;background-position:130% 0;animation:sheen 1.1s var(--ease) 1}
@keyframes sheen{to{background-position:-130% 0}}

/* primary gold CTA: soft sheen sweep on hover (atop the existing lift) */
.btn--gold{position:relative;overflow:hidden}
.btn--gold > *{position:relative;z-index:1}
.btn--gold::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;z-index:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);transition:left .6s var(--ease);pointer-events:none}
.btn--gold:hover::after{left:135%}

/* reduced-motion safety: never leave entrance/stat content hidden */
@media (prefers-reduced-motion:reduce){
  .js .hero__inner > *,.js .stats .stat{opacity:1;transform:none}
  .hero__canvas{opacity:1}
  .reveal .eyebrow::before{width:26px}
}