/*
  Design philosophy: Verdant Trade Atlas.
  Deep forest and near-black create a quiet editorial field; ivory type breathes;
  cocoa purple belongs to the official seal; gold is reserved for pathways and action.
*/
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --ink: #101b18;
  --forest: #102a24;
  --forest-deep: #071512;
  --forest-soft: #1d3d32;
  --ivory: #f4efe4;
  --muted-ivory: #c7c2b6;
  --gold: #d6a94c;
  --gold-soft: #e9c778;
  --purple: #2b165d;
  --line: rgba(231, 199, 120, 0.34);
  --line-light: rgba(244, 239, 228, 0.15);
  --radius: 0.75rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--forest-deep);
  color: var(--ivory);
  font-family: "DM Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button, a, select, input { outline-color: var(--gold-soft); }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 4px; }

.site-shell {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 77% 24%, rgba(50, 91, 67, 0.3), transparent 28rem),
    radial-gradient(circle at 19% 62%, rgba(41, 91, 68, 0.13), transparent 32rem),
    var(--forest-deep);
}
.site-shell::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.ambient { position: absolute; border-radius: 999px; pointer-events: none; filter: blur(2px); }
.ambient-one { width: 23rem; height: 23rem; top: 13rem; right: -9rem; background: rgba(205, 155, 66, .06); animation: ambient-breathe 15s ease-in-out infinite; }
.ambient-two { width: 18rem; height: 18rem; top: 46rem; left: -9rem; background: rgba(39, 90, 66, .22); animation: ambient-breathe 19s ease-in-out -5s infinite reverse; }

.site-header, .hero, .launch-section, .site-footer { position: relative; z-index: 1; width: min(100% - 6vw, 1420px); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2rem 0 1.3rem; }
.brand-lockup { display: inline-flex; align-items: center; gap: 1rem; }
.brand-logo { width: 4.65rem; height: 4.65rem; padding: .22rem; object-fit: contain; border: 1px solid rgba(244,239,228,.56); border-radius: 50%; background: rgba(244,239,228,.97); box-shadow: 0 0 0 4px rgba(43,22,93,.15), 0 10px 30px rgba(0,0,0,.25); }
.brand-copy { display: flex; flex-direction: column; gap: .2rem; }
.brand-name { font-family: "Cormorant Garamond", serif; font-size: clamp(1.55rem, 2.2vw, 2.05rem); font-weight: 600; letter-spacing: -.03em; line-height: .9; }
.brand-subtitle { color: var(--gold-soft); font-size: .72rem; letter-spacing: .17em; text-transform: uppercase; }
.header-note { display: flex; align-items: center; gap: .55rem; color: var(--muted-ivory); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.header-note svg { color: var(--gold-soft); }

.hero { display: grid; grid-template-columns: minmax(320px, .86fr) minmax(520px, 1.28fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: center; padding: clamp(4rem, 8vw, 8.5rem) 0 clamp(7rem, 12vw, 11rem); }
.hero-copy { position: relative; z-index: 2; max-width: 39rem; padding-left: clamp(0rem, 2vw, 2.2rem); }
.eyebrow, .section-kicker { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.7rem; color: var(--gold-soft); font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow-line { display: inline-block; width: 2.5rem; height: 1px; background: var(--gold); }
h1, h2, h3 { font-family: "Cormorant Garamond", serif; font-weight: 500; }
h1 { max-width: 11ch; margin: 0; color: var(--ivory); font-size: clamp(4rem, 6.8vw, 8.2rem); letter-spacing: -.065em; line-height: .79; }
h1 em, h2 em { color: var(--gold-soft); font-style: italic; font-weight: 400; }
.hero-lede { max-width: 33rem; margin: 2.4rem 0 0; color: var(--muted-ivory); font-size: clamp(1rem, 1.25vw, 1.18rem); line-height: 1.65; }
.movement-statement { display: flex; gap: .9rem; align-items: flex-start; margin: 2.6rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line-light); color: var(--ivory); }
.statement-mark { color: var(--gold-soft); font-family: "Cormorant Garamond", serif; font-size: 2rem; line-height: .75; }
.movement-statement p { margin: 0; color: var(--gold-soft); font-family: "Cormorant Garamond", serif; font-size: 1.28rem; font-style: italic; line-height: 1.15; }
.regional-line { margin-top: 2.1rem; color: rgba(244,239,228,.62); font-size: .75rem; letter-spacing: .04em; line-height: 1.8; }
.regional-line span, .footer-regions span { color: var(--gold); padding: 0 .35rem; }
.hero-jump { display: inline-flex; align-items: center; gap: .65rem; margin-top: 2.7rem; color: var(--ivory); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; transition: color 180ms ease, gap 180ms ease; }
.hero-jump svg { color: var(--gold-soft); transition: transform 180ms ease; }
.hero-jump:hover { color: var(--gold-soft); gap: .85rem; }
.hero-jump:hover svg { transform: translate(2px, -2px); }

.atlas { position: relative; min-height: 45rem; isolation: isolate; }
.atlas-texture { position: absolute; inset: 2.6rem 0 1rem 0; z-index: -4; border-radius: 46% 54% 50% 50% / 42% 38% 62% 58%; background-image: linear-gradient(rgba(7,21,18,.18),rgba(7,21,18,.18)), url("../assets/coming-soon/cocoa.webp"); background-position: center; background-size: cover; opacity: .23; filter: saturate(.7) contrast(.96); mix-blend-mode: screen; animation: atlas-breathe 18s ease-in-out infinite; }
.atlas-wash { position: absolute; inset: 0; z-index: -3; background: radial-gradient(ellipse at 52% 45%, rgba(20,65,47,.1), rgba(6,19,15,.88) 68%); }
.atlas-ring { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); border: 1px solid rgba(222, 178, 77, .18); border-radius: 50%; }
.ring-one { width: 31rem; height: 31rem; animation: ring-drift 25s ease-in-out infinite; }
.ring-two { width: 43rem; height: 43rem; border-color: rgba(222, 178, 77, .08); animation: ring-drift 33s ease-in-out -6s infinite reverse; }
.pathways { position: absolute; inset: 7% 0 8%; width: 100%; height: 85%; overflow: visible; z-index: -1; }
.path { stroke: rgba(219, 176, 77, .42); stroke-width: 1.1; stroke-dasharray: 2 14; stroke-linecap: round; animation: pathway-flow 24s linear infinite; }
.path-b { stroke: rgba(218, 199, 139, .27); animation-duration: 29s; animation-delay: -8s; }
.path-c { stroke: rgba(204, 151, 67, .28); animation-duration: 32s; animation-delay: -14s; }
.atlas-node { position: absolute; width: .44rem; height: .44rem; border-radius: 50%; background: var(--gold-soft); box-shadow: 0 0 0 .35rem rgba(225,184,88,.08), 0 0 1.4rem .2rem rgba(225,184,88,.75); animation: node-pulse 4.2s ease-in-out infinite; }
.node-one { top: 25%; left: 42%; }.node-two { top: 51%; left: 74%; animation-delay: -1.6s; }.node-three { top: 69%; left: 34%; animation-delay: -2.8s; }
.atlas-center { position: absolute; top: 46%; left: 50%; width: 8rem; height: 8rem; transform: translate(-50%, -50%); display: grid; place-items: center; }
.atlas-center img { position: relative; width: 5.5rem; height: 5.5rem; padding: .22rem; object-fit: contain; z-index: 2; border: 1px solid rgba(244,239,228,.58); border-radius: 50%; background: rgba(244,239,228,.97); box-shadow: 0 0 0 8px rgba(7,21,18,.74), 0 0 30px rgba(206,159,68,.25); }
.center-orbit { position: absolute; inset: 0; border: 1px solid rgba(229,190,102,.6); border-radius: 50%; animation: orbit-spin 26s linear infinite; }
.center-orbit::before, .center-orbit::after { position: absolute; width: .32rem; height: .32rem; border-radius: 50%; content: ""; background: var(--gold-soft); box-shadow: 0 0 1rem rgba(226,181,78,.8); }
.center-orbit::before { left: 18%; top: 8%; }.center-orbit::after { right: 11%; bottom: 18%; }
.commodity-window { position: absolute; width: 10.8rem; margin: 0; border: 1px solid rgba(227,184,83,.42); border-radius: 1.1rem; overflow: hidden; background: rgba(13, 35, 29, .68); box-shadow: 0 20px 50px rgba(0,0,0,.22); backdrop-filter: blur(5px); animation: window-float 14s ease-in-out infinite; transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease; }
.commodity-window:hover { transform: translateY(-6px) rotate(-1deg); border-color: rgba(236,201,117,.8); box-shadow: 0 30px 70px rgba(0,0,0,.33), 0 0 2rem rgba(216,164,64,.12); }
.window-image-wrap { height: 7.15rem; overflow: hidden; }.window-image-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .9; transition: transform 900ms cubic-bezier(.23,1,.32,1); }.commodity-window:hover img { transform: scale(1.06); }
.commodity-window figcaption { display: flex; flex-direction: column; gap: .28rem; padding: .75rem .9rem .82rem; }.commodity-window figcaption span { color: var(--ivory); font-size: .72rem; letter-spacing: .04em; }.commodity-window small { color: var(--gold-soft); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; }
.window-primary { top: 3%; right: 10%; animation-delay: -2s; }.window-secondary { top: 36%; left: 4%; animation-duration: 17s; animation-delay: -8s; }
.sector-pulse { position: absolute; bottom: 2%; left: 24%; display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .7rem; max-width: 25rem; padding: .8rem 1.05rem; border-top: 1px solid rgba(231,199,120,.35); border-bottom: 1px solid rgba(231,199,120,.18); background: linear-gradient(90deg, rgba(7,21,18,.0), rgba(7,21,18,.62), rgba(7,21,18,0)); font-size: .72rem; }
.pulse-dot { width: .42rem; height: .42rem; border-radius: 50%; background: var(--gold-soft); box-shadow: 0 0 0 .28rem rgba(226,181,78,.12); animation: node-pulse 3.2s ease-in-out infinite; }.pulse-label { color: rgba(244,239,228,.52); text-transform: uppercase; letter-spacing: .14em; }.pulse-sector { color: var(--gold-soft); font-family: "Cormorant Garamond", serif; font-size: 1.2rem; animation: text-fade 4200ms ease both; }.pulse-detail { flex-basis: 100%; padding-left: 1.6rem; color: rgba(244,239,228,.54); font-size: .68rem; }
.atlas-caption { position: absolute; bottom: -1.3rem; right: 2%; display: flex; align-items: center; gap: .9rem; color: rgba(244,239,228,.43); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }.atlas-caption span:first-child { color: var(--gold-soft); font-family: "Cormorant Garamond", serif; font-size: 1.1rem; }

.launch-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 9vw, 11rem); align-items: start; padding: 7rem clamp(0rem, 5vw, 5rem) 8rem; border-top: 1px solid rgba(231,199,120,.13); }
.launch-intro { max-width: 25rem; padding-top: .7rem; }.launch-intro h2 { margin: 0; font-size: clamp(4rem, 7vw, 7rem); letter-spacing: -.07em; line-height: .74; }.launch-intro > p:not(.section-kicker) { margin: 2rem 0 0; color: var(--muted-ivory); font-size: 1rem; line-height: 1.65; }
.membership-note { display: flex; gap: .8rem; margin-top: 2.6rem; padding-top: 1.1rem; border-top: 1px solid var(--line-light); color: rgba(244,239,228,.62); font-size: .75rem; line-height: 1.4; }.membership-note span:first-child { color: var(--gold-soft); font-family: "Cormorant Garamond", serif; font-size: 1.15rem; }
.form-frame { min-height: 25rem; padding: clamp(1.5rem, 4vw, 3.2rem); border: 1px solid rgba(231,199,120,.32); border-radius: 1rem; background: linear-gradient(138deg, rgba(29,61,50,.42), rgba(10,29,23,.72)); box-shadow: 0 25px 80px rgba(0,0,0,.2); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }.field { display: flex; flex-direction: column; gap: .65rem; color: rgba(244,239,228,.68); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }.field-wide { margin-top: 1.35rem; }.field input, .field select { width: 100%; min-height: 3.2rem; border: 1px solid rgba(244,239,228,.18); border-radius: .35rem; padding: 0 .95rem; color: var(--ivory); background: rgba(5,17,14,.44); font-size: .92rem; letter-spacing: 0; text-transform: none; transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease; }.field input::placeholder { color: rgba(244,239,228,.38); }.field input:focus, .field select:focus { border-color: var(--gold-soft); background: rgba(5,17,14,.72); box-shadow: 0 0 0 3px rgba(231,199,120,.08); outline: none; }.select-wrap { position: relative; display: block; }.select-wrap svg { position: absolute; right: 1rem; top: 50%; pointer-events: none; color: var(--gold-soft); transform: translateY(-50%); }.field select { appearance: none; padding-right: 2.75rem; }.field option { color: var(--ink); background: var(--ivory); }
.hidden-field { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }.form-error { margin: 1rem 0 0; color: #f0a89e; font-size: .78rem; line-height: 1.5; }.submit-button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 3.55rem; margin-top: 1.8rem; border: 1px solid var(--gold-soft); border-radius: .35rem; padding: 0 1.2rem 0 1.4rem; color: #1a1d14; background: var(--gold-soft); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background 180ms ease, color 180ms ease, transform 180ms ease; }.submit-button:hover { color: var(--ivory); background: transparent; }.submit-button:active { transform: scale(.985); }.submit-button:disabled { cursor: wait; opacity: .66; }.submit-button svg { transition: transform 180ms ease; }.submit-button:hover svg { transform: translateX(4px); }.form-privacy { margin: 1rem 0 0; color: rgba(244,239,228,.4); font-size: .68rem; text-align: center; }.success-state { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 20rem; }.success-seal { display: grid; place-items: center; width: 4.8rem; height: 4.8rem; margin-bottom: 2rem; border: 1px solid rgba(231,199,120,.35); border-radius: 50%; }.success-seal img { width: 4rem; height: 4rem; padding: .18rem; object-fit: contain; border-radius: 50%; background: rgba(244,239,228,.97); }.success-state h3 { max-width: 14ch; margin: 0; color: var(--ivory); font-size: clamp(2.4rem, 4vw, 4rem); letter-spacing: -.05em; line-height: .9; }.success-state > p:not(.section-kicker) { max-width: 27rem; margin: 1.4rem 0 0; color: var(--muted-ivory); line-height: 1.6; }.text-button { display: inline-flex; align-items: center; gap: .45rem; margin-top: 2rem; border: 0; padding: 0; color: var(--gold-soft); background: none; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }.text-button:hover { text-decoration: underline; }
.site-footer { display: flex; justify-content: space-between; gap: 1.5rem; padding: 1.4rem 0 2.4rem; border-top: 1px solid rgba(231,199,120,.13); color: rgba(244,239,228,.48); font-size: .67rem; letter-spacing: .04em; }.footer-regions { color: rgba(244,239,228,.65); }.footer-meta { display: flex; align-items: center; gap: 1rem; }.footer-meta a { display: inline-flex; align-items: center; gap: .35rem; color: var(--gold-soft); }.footer-meta a:hover { text-decoration: underline; }

@keyframes ambient-breathe { 0%, 100% { transform: scale(1) translate3d(0,0,0); opacity: .7; } 50% { transform: scale(1.15) translate3d(1rem,-.8rem,0); opacity: 1; } }
@keyframes atlas-breathe { 0%, 100% { transform: scale(1) rotate(0deg); opacity: .21; } 50% { transform: scale(1.035) rotate(1.2deg); opacity: .3; } }
@keyframes ring-drift { 0%, 100% { transform: translate(-50%,-50%) rotate(0deg) scale(1); } 50% { transform: translate(-50%,-50%) rotate(4deg) scale(1.02); } }
@keyframes pathway-flow { to { stroke-dashoffset: -170; } }
@keyframes node-pulse { 0%, 100% { transform: scale(.8); opacity: .66; } 50% { transform: scale(1.2); opacity: 1; } }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes window-float { 0%, 100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(0,-9px,0) rotate(.7deg); } }
@keyframes text-fade { 0% { opacity: 0; transform: translateY(4px); } 12%, 86% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-4px); } }

@media (max-width: 980px) { .hero { grid-template-columns: 1fr; gap: 3rem; padding-top: 5rem; }.hero-copy { max-width: 41rem; }.atlas { min-height: 39rem; width: min(100%, 44rem); margin-inline: auto; }.launch-section { gap: 4rem; padding-inline: 0; }.launch-intro { max-width: 32rem; } }
@media (max-width: 650px) { .site-header, .hero, .launch-section, .site-footer { width: min(100% - 2.2rem, 1420px); }.site-header { align-items: flex-start; padding-top: 1.3rem; }.brand-logo { width: 3.6rem; height: 3.6rem; padding: .18rem; }.brand-name { font-size: 1.5rem; }.header-note { display: none; }.hero { padding-top: 4.6rem; padding-bottom: 5rem; }.hero-copy { padding-left: 0; }.eyebrow { margin-bottom: 1.35rem; } h1 { font-size: clamp(3.8rem, 17vw, 6rem); }.hero-lede { margin-top: 2rem; font-size: .98rem; }.movement-statement { margin-top: 2rem; }.regional-line { margin-top: 1.7rem; }.hero-jump { margin-top: 2rem; }.atlas { min-height: 30rem; margin-top: -.3rem; }.atlas-texture { inset: 2rem 0 0; }.ring-one { width: 19rem; height: 19rem; }.ring-two { width: 28rem; height: 28rem; }.atlas-center { width: 6.3rem; height: 6.3rem; }.atlas-center img { width: 4.4rem; height: 4.4rem; padding: .18rem; }.commodity-window { width: 8.1rem; border-radius: .85rem; }.window-image-wrap { height: 5.15rem; }.commodity-window figcaption { padding: .56rem .65rem .62rem; }.commodity-window figcaption span { font-size: .6rem; }.commodity-window small { font-size: .5rem; }.window-primary { top: 2%; right: 0; }.window-secondary { top: 37%; left: 0; }.sector-pulse { left: 17%; bottom: 1%; max-width: 18rem; padding: .6rem .7rem; }.pulse-sector { font-size: 1rem; }.atlas-caption { bottom: -1.3rem; left: 0; right: auto; font-size: .53rem; }.atlas-caption span:last-child { max-width: 14rem; line-height: 1.5; }.launch-section { grid-template-columns: 1fr; gap: 3rem; padding-top: 5rem; padding-bottom: 5rem; }.launch-intro h2 { font-size: clamp(4rem, 20vw, 6.2rem); }.form-frame { padding: 1.35rem; }.form-grid { grid-template-columns: 1fr; gap: 1.25rem; }.field-wide { margin-top: 1.25rem; }.site-footer { flex-direction: column; padding-bottom: 1.5rem; }.footer-meta { flex-wrap: wrap; gap: .8rem 1.1rem; }.footer-meta a { flex-basis: 100%; } }

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

[hidden]{display:none!important}.window-image-wrap img.is-changing{opacity:.18;transform:scale(1.03)}