@font-face{font-family:Inter;font-weight:300;font-style:normal;font-display:swap;src:url(fonts/inter-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:400;font-style:normal;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:500;font-style:normal;font-display:swap;src:url(fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:700;font-style:normal;font-display:swap;src:url(fonts/inter-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:800;font-style:normal;font-display:swap;src:url(fonts/inter-latin-800-normal.woff2) format("woff2")}

:root{
  --ink:#1B1B1D;--paper:#F6F5F2;--signal:#1D66E0;--harbour:#0B2A4A;--dune:#C8A36A;--steel:#5E636B;--white:#FFFFFF;
  --soft:rgba(246,245,242,.85);--rule:rgba(246,245,242,.6);--faint:rgba(246,245,242,.18);
  --pad:clamp(20px,5vw,72px);--sec:clamp(64px,9vw,128px);--gap:clamp(36px,4.5vw,64px);
  --font:Inter,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
img{display:block;max-width:100%}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--signal);color:var(--white);padding:12px 20px;z-index:30;text-decoration:none;font-weight:500}
.skip:focus{left:8px}

/* layout */
.wrap{max-width:1200px;margin:0 auto}
.s{padding:var(--sec) var(--pad)}
.s--ink{background:var(--ink);color:var(--paper)}
.s--harbour{background:var(--harbour);color:var(--paper)}
.s--white{background:var(--white)}
.stack{display:flex;flex-direction:column;gap:var(--gap)}
.cols{display:flex;flex-wrap:wrap;gap:32px}
.head{display:flex;flex-direction:column;gap:16px}

/* type */
.lbl{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.5}
.lbl--steel{color:var(--steel)}
.lbl--dune{color:var(--dune)}
.tnum{font-feature-settings:"tnum" 1}
.h2{font-size:clamp(32px,4.2vw,56px);font-weight:700;letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
.h3{font-size:clamp(22px,2vw,27px);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.soft{color:var(--soft)}
.cap{font-size:16px;color:var(--steel)}
.s--ink .cap,.s--harbour .cap{color:var(--soft)}

/* icons: line drawings, Signal node as the accent */
.ico{width:60px;height:60px;fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:square;stroke-linejoin:miter;overflow:visible}
.ico .acc{fill:var(--signal);stroke:none}
.ico .dot{fill:var(--ink);stroke:none}
.ico--lt{stroke:var(--paper)}
.ico--lt .ac2{stroke:var(--dune)}
.ico--lt .accd{fill:var(--dune);stroke:none}
.ico--lg{width:72px;height:72px;stroke:var(--paper)}

/* header */
.top{position:sticky;top:0;z-index:20;background:var(--ink);color:var(--paper);padding:0 var(--pad);transition:background .3s,box-shadow .3s}
.top.scrolled{background:rgba(27,27,29,.94);box-shadow:0 1px 0 rgba(246,245,242,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
section[id]{scroll-margin-top:72px}
.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:8px 32px;padding:20px 0;transition:padding .3s}
.top.scrolled .wrap{padding:10px 0}
.brand{display:inline-flex;align-items:center;min-height:44px}
.brand img{height:30px;width:auto}
.nav{font-size:15px;font-weight:500}
.menu{display:flex;flex-wrap:wrap;align-items:center;gap:0 28px}
.menu-btn{display:none}
.menu a,.foot-nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.menu a:hover,.foot-nav a:hover{text-decoration:underline;text-underline-offset:6px}
.menu .cta-nav{padding:0 20px;background:var(--signal);color:var(--white)}
.menu .cta-nav:hover{text-decoration:none;background:#1858c4}

/* hero */
.hero>.wrap{width:calc(100% - 2*var(--pad))}
.hero-in{padding-top:clamp(56px,8vw,104px);padding-bottom:clamp(40px,5vw,72px);display:flex;flex-direction:column;gap:28px}
.hero h1{font-size:clamp(52px,9vw,124px);font-weight:800;letter-spacing:-.045em;line-height:.98}
.hero .intro{font-size:clamp(19px,1.9vw,24px);line-height:1.45;max-width:24em}
.hero .acts{display:flex;padding-top:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;background:var(--signal);color:var(--white);text-decoration:none;font-size:16px;font-weight:500}
.btn:hover{background:#1858c4}
.btn .arr{display:inline-block;margin-left:10px;transition:transform .25s ease}
.btn:hover .arr{transform:translateX(5px)}
.route{display:block;width:100%;height:clamp(200px,29.2vw,420px)}

/* why */
.statement{font-size:clamp(34px,5vw,68px);font-weight:800;letter-spacing:-.035em;line-height:1.04;max-width:15em;text-wrap:balance}
.vals{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:40px 32px}
.val{display:flex;flex-direction:column;gap:12px;border-top:2px solid var(--ink);padding-top:28px}
.val .ico{margin-bottom:8px}
.val p{font-size:18px;color:var(--steel)}

/* route map */
.map{display:block;width:100%;height:auto;overflow:visible}
.map-m{display:none;max-width:420px;margin:0 auto}
.map .tw{fill:none;stroke:rgba(246,245,242,.45);stroke-width:2}
.map .tw-n{fill:rgba(246,245,242,.6)}
.map .trunk{fill:none;stroke:var(--paper);stroke-width:7;stroke-linejoin:miter}
.map .alt{fill:none;stroke:rgba(246,245,242,.55);stroke-width:2.5;stroke-dasharray:2 7;stroke-linecap:round}
.map .br{fill:none;stroke:var(--paper);stroke-width:3.5}
.map .hub,.map .mk{fill:var(--paper)}
.map .acc{fill:var(--signal)}
.map .ring{fill:none;stroke:var(--signal);stroke-width:2;opacity:.6}
.map text{font-family:var(--font)}
.map .m-lbl{fill:var(--dune);font-weight:600;letter-spacing:.14em}
.map .m-name{fill:var(--paper);font-weight:800;letter-spacing:-.02em}
.map .m-mk{fill:var(--paper);font-weight:500}

/* trade */
.flow{display:grid;grid-template-columns:1fr minmax(64px,1fr) 1fr minmax(64px,1fr) 1fr;align-items:start;text-align:center;padding-top:8px}
.fnode{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.fcirc{height:148px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.fcirc .ico{width:104px;height:104px;padding:24px;border-radius:50%;border:2px solid rgba(246,245,242,.5);background:rgba(246,245,242,.05);overflow:visible;box-sizing:border-box}
.fcirc--hub img{width:148px;height:148px;border-radius:18%;box-shadow:0 0 0 12px rgba(246,245,242,.07),0 0 0 24px rgba(246,245,242,.035)}
.fnode p{font-size:17px;max-width:14em}
.fnode--hub .h3{white-space:nowrap}
.fline{height:148px;min-width:0}
.fline svg{display:block;width:100%;height:100%;overflow:visible}
.fline .fl-v{display:none}
.f-main{fill:none;stroke:rgba(246,245,242,.75);stroke-width:2}
.f-alt{fill:none;stroke:rgba(246,245,242,.3);stroke-width:1.5}
.f-alt2{stroke-dasharray:3 6}
.f-dash{fill:none;stroke:var(--dune);stroke-width:4;stroke-dasharray:6 18;animation:flow 1.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-48}}
@media (prefers-reduced-motion:reduce){.f-dash{animation:none}}

/* standards: round badges */
.badges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 32px}
.badge-item{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.badge{width:104px;height:104px;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center;margin-bottom:14px;box-shadow:0 0 0 8px var(--paper),0 0 0 9px rgba(27,27,29,.18)}
.ico--badge{width:50px;height:50px;stroke:var(--paper);stroke-width:2.5}
.badge-item p{font-size:17px;color:var(--steel);max-width:15em}

/* how: steps on a line */
.cols--steps{gap:40px 32px}
.step{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:12px}
.rail{display:flex;align-items:center;height:22px;margin-bottom:8px}
.node{flex:none;width:16px;height:16px;border-radius:50%;background:var(--ink)}
.node--lg{width:22px;height:22px}
.node--signal{background:var(--signal)}
.line{flex-grow:1;height:2px;background:var(--ink)}

/* name: rise + rhizome = rhyze */
.eq{display:flex;flex-wrap:wrap;align-items:flex-end;gap:24px clamp(20px,4vw,56px)}
.term{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.term .ico{margin-bottom:10px}
.word{font-size:clamp(40px,5.4vw,72px);font-weight:800;letter-spacing:-.04em;line-height:1}
.word--res{display:inline-flex;align-items:baseline}
.term--res .word{font-size:clamp(52px,7vw,96px)}
.dot-sig{display:inline-block;width:.2em;height:.2em;border-radius:50%;background:var(--signal);margin-left:.07em}
.op{font-size:clamp(36px,4.4vw,60px);font-weight:300;color:var(--dune);line-height:1;padding-bottom:46px}
.kicker{font-size:clamp(22px,2.4vw,30px);font-weight:500;letter-spacing:-.01em;color:var(--soft);border-top:1px solid var(--faint);padding-top:28px}

/* contact */
.reach{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.big-link{font-size:clamp(24px,3.6vw,44px);font-weight:700;letter-spacing:-.025em;line-height:1.25;text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:3px;text-underline-offset:8px;overflow-wrap:anywhere;min-height:44px}
.big-link:hover{color:var(--signal)}
.detail{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:6px;border-top:2px solid var(--ink);padding-top:16px}

/* footer */
.foot{background:var(--ink);color:var(--paper);padding:48px var(--pad)}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px}
.foot-id{display:flex;flex-direction:column;gap:16px}
.foot-id img{height:36px;width:auto;align-self:flex-start}
.foot-line{font-size:20px;font-weight:800;letter-spacing:-.03em}
.foot-id small{font-size:13px;line-height:1.6;color:var(--soft)}
.foot-nav{display:flex;flex-wrap:wrap;align-content:flex-start;gap:0 28px;font-size:14px}

/* map swaps to the vertical version before labels get small */
@media (max-width:900px){
  .badges{grid-template-columns:repeat(2,minmax(0,1fr))}
  .map-d{display:none}
  .map-m{display:block}
}

/* tablet and phone */
@media (max-width:760px){
  .top{position:sticky;top:0}
  .top .wrap{flex-wrap:nowrap;padding:10px 0}
  .brand img{height:26px}
  section[id]{scroll-margin-top:64px}
  .js .menu-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;margin-right:-6px;background:none;border:1px solid var(--rule);color:var(--paper);font:inherit;font-size:15px;font-weight:500;cursor:pointer}
  .menu-ico,.menu-ico::before,.menu-ico::after{display:block;width:16px;height:2px;background:currentColor}
  .menu-ico{position:relative}
  .menu-ico::before,.menu-ico::after{content:"";position:absolute;left:0}
  .menu-ico::before{top:-5px}.menu-ico::after{top:5px}
  .menu-open .menu-ico{background:transparent}
  .menu-open .menu-ico::before{top:0;transform:rotate(45deg)}
  .menu-open .menu-ico::after{top:0;transform:rotate(-45deg)}
  .js .menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--pad) 24px;background:var(--ink);border-top:1px solid rgba(246,245,242,.2);box-shadow:0 24px 32px rgba(0,0,0,.35)}
  .js.menu-open .menu{display:flex}
  .js .menu a{min-height:56px;font-size:19px;border-bottom:1px solid rgba(246,245,242,.14)}
  .js .menu .cta-nav{justify-content:center;margin-top:20px;border-bottom:0;font-size:17px}
  .hero .btn{flex:1}
}

@media (max-width:640px){
  /* steps become a vertical line */
  .cols.cols--steps{flex-direction:column;gap:0}
  .cols--steps>.step{flex:none;display:grid;grid-template-columns:22px 1fr;column-gap:18px;row-gap:4px}
  .step>.rail{grid-column:1;grid-row:1/span 2;flex-direction:column;height:auto;margin:0;align-self:stretch;padding-top:5px}
  .step>:not(.rail){grid-column:2}
  .step .line{width:2px;height:auto;flex-grow:1;margin:6px 0 -6px}
  .step>:last-child{padding-bottom:32px}
  .step:last-child>:last-child{padding-bottom:0}
  /* equation stacks */
  .eq{flex-direction:column;align-items:flex-start;gap:12px}
  .term{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:16px;row-gap:4px}
  .term .ico{width:44px;height:44px;margin:0}
  .term .cap{flex-basis:100%;padding-left:60px}
  .term--res .cap{padding-left:0}
  .op{padding:0 0 0 12px}
  .badges{gap:32px 20px}
  .badge{width:84px;height:84px;margin-bottom:8px}
  .ico--badge{width:42px;height:42px}
  .badge-item .h3{font-size:20px}
  .badge-item p{font-size:15px}
  .flow{grid-template-columns:1fr;justify-items:center}
  .fline{height:88px;width:148px}
  .fline .fl-h{display:none}.fline .fl-v{display:block}
  .fcirc{height:auto;margin-bottom:8px}
  .fcirc--hub img{width:120px;height:120px}
  .val{display:grid;grid-template-columns:auto 1fr;column-gap:18px;row-gap:4px;padding-top:24px;align-items:center}
  .val .ico{grid-row:1/span 2;width:44px;height:44px;margin:0}
  .val p{font-size:17px}
  .vals{gap:24px}
  .foot-nav{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;width:100%}
}

/* ---------- motion: routes grow west to east, things rise ---------- */
@keyframes rise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes pulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(4)}}

.hero-in>*{animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
.hero-in>:nth-child(1){animation-delay:.05s}
.hero-in>:nth-child(2){animation-delay:.18s}
.hero-in>:nth-child(3){animation-delay:.36s}
.hero-in>:nth-child(4){animation-delay:.5s}

.route .rp{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.3s cubic-bezier(.35,.4,.2,1) forwards}
.route .rp-f,.route .rn{opacity:0;animation:pop .6s ease-out forwards;transform-box:fill-box;transform-origin:center}
.route .b0{animation-delay:.5s}.route .b1{animation-delay:.68s}.route .b2{animation-delay:.86s}.route .b3{animation-delay:1.04s}.route .b4{animation-delay:1.22s}
.route .b5{animation-delay:1.4s}.route .b6{animation-delay:1.58s}.route .b7{animation-delay:1.76s}.route .b8{animation-delay:1.94s}.route .b9{animation-delay:2.12s}
.route .rn.b0{animation-delay:1.1s}.route .rn.b1{animation-delay:1.28s}.route .rn.b2{animation-delay:1.46s}.route .rn.b3{animation-delay:1.64s}.route .rn.b4{animation-delay:1.82s}
.route .rn.b5{animation-delay:2s}.route .rn.b6{animation-delay:2.18s}.route .rn.b7{animation-delay:2.36s}.route .rn.b8{animation-delay:2.54s}.route .rn.b9{animation-delay:2.9s}
.route .dest-ring{transform-box:fill-box;transform-origin:center;opacity:0;animation:pulse 2.4s ease-out 3.2s infinite}

/* scroll reveals (only when the script is running) */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .rv .dw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s cubic-bezier(.35,.4,.2,1) .25s}
.js .rv.in .dw{stroke-dashoffset:0}
.js .rv .ico .acc,.js .rv .ico .accd,.js .rv .ico .dot{opacity:0;transition:opacity .5s 1.1s}
.js .rv.in .ico .acc,.js .rv.in .ico .accd,.js .rv.in .ico .dot{opacity:1}

/* route map draws itself */
.js .map.rv{transform:none}
.js .map.rv .dr{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s cubic-bezier(.35,.4,.2,1)}
.js .map.rv.in .dr{stroke-dashoffset:0}
.js .map.rv .d1{transition-delay:.35s}.js .map.rv .d3{transition-delay:1.2s}.js .map.rv .d4{transition-delay:1.5s}
.js .map.rv .tw,.js .map.rv .tw-n,.js .map.rv .alt,.js .map.rv .hub,.js .map.rv .mk,.js .map.rv .acc,.js .map.rv .ring,.js .map.rv text,.js .map.rv .cargo{opacity:0;transition:opacity .7s ease}
.js .map.rv.in .tw,.js .map.rv.in .tw-n,.js .map.rv.in .hub{opacity:1;transition-delay:.1s}
.js .map.rv.in .alt{opacity:1;transition-delay:1.4s}
.js .map.rv.in .mk,.js .map.rv.in .acc,.js .map.rv.in text{opacity:1;transition-delay:1.9s}
.js .map.rv.in .ring{opacity:.6;transition-delay:2.2s}
.js .map.rv.in .cargo{opacity:1;transition-delay:2.6s}
.map .cargo{fill:var(--dune)}
.map .ring{transform-box:fill-box;transform-origin:center;animation:breathe 3s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.18)}}

/* steps: the line runs on to the next node */
.js .step.rv .line{transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.35,.4,.2,1) .35s}
.js .step.rv.in .line{transform:none}
.js .step.rv .node{transform:scale(0);transition:transform .5s ease-out .1s}
.js .step.rv.in .node{transform:none}

/* name: the blue full stop lands last */
.js .term--res.rv .dot-sig{transform:scale(0);transition:transform .5s ease-out .7s}
.js .term--res.rv.in .dot-sig{transform:none}

/* small hover cues */
.badge{transition:box-shadow .3s ease,transform .3s ease}
.badge-item:hover .badge{transform:translateY(-4px);box-shadow:0 0 0 8px var(--paper),0 0 0 9px var(--signal)}
.val .ico,.fcirc .ico{transition:transform .3s ease}
.val:hover .ico,.fnode:hover .fcirc .ico{transform:translateY(-4px)}

@media (max-width:640px){
  .js .step.rv .line{transform:scaleY(0);transform-origin:top}
}

@media (prefers-reduced-motion:reduce){
  .hero-in>*,.route .rp,.route .rp-f,.route .rn{animation:none;opacity:1;stroke-dasharray:none;stroke-dashoffset:0}
  .route .dest-ring,.map .cargo{display:none}
  .map .ring,.f-dash{animation:none}
  .js .rv,.js .rv *{transition:none!important}
}