/* v2 additions: visuals, mobile fixes, accessibility */
section[id]{scroll-margin-top:84px}
h1,h2{text-wrap:balance}
p{text-wrap:pretty}
.skip:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;clip:auto;background:#fff;color:#0a111d;padding:12px 18px;z-index:100}
.prog{position:fixed;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--brass),var(--brass-hi));transform:scaleX(0);transform-origin:left;z-index:70}
body.menu-open{overflow:hidden}

/* header: blur lives on a pseudo-element so the mobile overlay is not trapped */
.hdr.solid{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.hdr::before{content:"";position:absolute;inset:0;background:rgba(10,17,29,.86);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);opacity:0;transition:opacity .4s;z-index:-1}
.hdr.solid::before{opacity:1}

/* hero */
.nocatch{display:flex;gap:12px;align-items:center;margin-top:26px;font-size:.95rem;color:rgba(233,237,244,.9);max-width:60ch}
.nocatch .dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--brass-hi);box-shadow:0 0 0 5px rgba(212,181,122,.18)}
.facts span a{color:var(--brass-hi);text-underline-offset:3px;pointer-events:auto}
.globe-cap{position:absolute;right:var(--gut);bottom:18px;z-index:2;font:500 .62rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.42);pointer-events:none}
.hero .wrap{padding-top:130px}
.hero h1{margin:26px 0 24px}

/* credentials */
.who-head{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(30px,6vw,100px);align-items:end}
.who .verify{margin:0;border:0;padding:0}
.cats{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin-top:clamp(44px,6vw,80px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cats li{padding:34px 18px 30px;text-align:center;display:grid;gap:18px;justify-items:center;transition:background .4s,transform .5s var(--ease)}
.cats li+li{border-left:1px solid var(--line)}
.cats li:hover{background:rgba(185,152,92,.08);transform:translateY(-4px)}
.cats svg{width:46px;height:46px;fill:none;stroke:#8c6d33;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.cats span{font:400 1.12rem/1.2 var(--serif);color:var(--navy)}

/* line-draw animation for SVG illustrations */
.js .draw path,.js .draw circle,.js .draw rect,.js .draw ellipse{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease) .2s}
.js .draw.in path,.js .draw.in circle,.js .draw.in rect,.js .draw.in ellipse{stroke-dashoffset:0}
.duel circle{stroke-dasharray:none!important;stroke-dashoffset:0!important}

/* broker vs TFI */
.duel{margin:0 0 clamp(40px,6vw,80px);padding:clamp(20px,3vw,40px);border:1px solid var(--line-d);background:rgba(255,255,255,.02)}
.duel svg{display:block;width:100%;height:auto;overflow:visible}
.duel path{fill:none;stroke-width:2;stroke-linecap:round}
.duel .mute{stroke:#5d6a80}
.duel .gold-l{stroke:var(--brass-hi);stroke-width:2.5}
.duel .mute-dot{fill:#5d6a80;stroke:none}
.duel .g-dot{fill:var(--brass-hi);stroke:none}
.duel text{font-family:var(--sans);fill:#c4ccd9;font-size:13px;letter-spacing:.08em}
.duel .t-lab{font-size:12px;font-weight:600;letter-spacing:.2em;fill:#aab4c5}
.duel .t-lab.gold,.duel .gold{fill:var(--brass-hi)}
.duel .t-sm{font-size:12px}
.duel .mute-t{fill:#8a96aa}
.nots .not{padding:clamp(24px,3vw,38px) 0}
.nots .not .t{font-size:clamp(1.7rem,3vw,2.5rem)}

/* what we do: route */
.route{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px);padding-top:8px}
.route-line{position:absolute;left:0;right:0;top:46px;width:100%;height:24px;z-index:0}
.route-line path{fill:none;stroke:var(--brass);stroke-width:1;vector-effect:non-scaling-stroke}
.js .route.draw .route-line path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2s var(--ease) .2s}
.js .route.draw.in .route-line path{stroke-dashoffset:0}
.rt{position:relative;z-index:1}
.rt .ic{width:76px;height:76px;border-radius:50%;background:var(--paper);border:1px solid var(--brass);display:grid;place-items:center;margin-bottom:30px;transition:transform .5s var(--ease),background .4s}
.rt:hover .ic{transform:translateY(-6px);background:#fff}
.rt .ic svg{width:40px;height:40px;fill:none;stroke:var(--navy);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.rt .n{font:italic 300 4.8rem/1 var(--serif);color:transparent;-webkit-text-stroke:1px rgba(140,109,51,.5);letter-spacing:-.02em;display:block;margin-bottom:6px}
.rt h3{color:var(--navy);margin:2px 0 14px;font-size:1.7rem}
.rt p{color:var(--text);max-width:36ch;font-size:1rem}
.aim{margin-top:clamp(50px,6vw,90px);padding-top:34px;border-top:1px solid var(--line);font:300 clamp(1.5rem,2.6vw,2.2rem)/1.25 var(--serif);color:var(--navy);display:block}
.aim em{color:#8c6d33}

/* process */
.step.key .body{padding:26px 28px;margin:-8px 0 0 -4px;background:rgba(185,152,92,.08);border:1px solid rgba(185,152,92,.4)}
.step.key.in .num{border-color:var(--brass);background:var(--brass);color:#0a111d}
.step p{color:#b7c0cf}
.again{margin-top:26px;margin-left:calc(44px + clamp(22px,4vw,64px))}

/* founder */
.portrait{background:#0e1a2c}
.portrait img{filter:grayscale(1) contrast(1.08)}
.portrait::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(160deg,#16294a 0%,#b9985c 140%);mix-blend-mode:color;opacity:.55;pointer-events:none}
.f-body p.fine{font-size:.78rem;color:#8a96aa;margin-top:14px}
.book{grid-template-columns:78px 1fr;gap:22px}
.book img{width:78px;height:auto}

/* sticky mobile CTA */
.sticky{position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:45;display:none;align-items:center;justify-content:space-between;gap:14px;background:var(--brass);color:#0a111d;text-decoration:none;font:500 .95rem/1 var(--sans);padding:17px 22px;box-shadow:0 10px 30px rgba(0,0,0,.4);transform:translateY(160%);transition:transform .5s var(--ease)}
.sticky svg{width:18px;height:18px}
.sticky.show{transform:none}
.btn{line-height:1.3}

@media (max-width:980px){
  .who-head{grid-template-columns:1fr}
  .cats{grid-template-columns:repeat(3,1fr)}
  .cats li:nth-child(4){border-left:0}
  .cats li:nth-child(n+4){border-top:1px solid var(--line)}
  .route{grid-template-columns:1fr;gap:44px}
  .route-line{display:none}
  .rt{display:grid;grid-template-columns:76px 1fr;column-gap:24px}
  .rt .ic{grid-row:1/4;margin:0}
  .rt .n{font-size:3rem}
  .hdr.solid{background:rgba(10,17,29,.96)}
  .hdr.solid::before{display:none}
  .sticky{display:flex}
}
@media (max-width:640px){
  .hero{display:flex;flex-direction:column;min-height:0;align-items:stretch}
  .hero .wrap{padding-top:8px;order:1}
  #map{position:relative;left:auto;top:auto;width:100%;height:min(70vw,290px);margin-top:62px;order:0}
  .globe-cap{position:static;order:2;padding:0 var(--gut) 18px;font-size:.58rem}
  .facts{margin-top:36px}
  .cats{grid-template-columns:repeat(2,1fr)}
  .cats li:nth-child(odd){border-left:0}
  .cats li:nth-child(even){border-left:1px solid var(--line)}
  .cats li:nth-child(n+3){border-top:1px solid var(--line)}
  .rt{grid-template-columns:60px 1fr;column-gap:18px}
  .rt .ic{width:60px;height:60px}
  .rt .ic svg{width:32px;height:32px}
  .step.key .body{margin-left:0;padding:20px}
  .again{margin-left:0}
  .duel{padding:14px 10px}
  body{padding-bottom:78px}
}
@media (prefers-reduced-motion:reduce){
  .js .draw path,.js .draw circle,.js .draw rect,.js .draw ellipse,.js .route.draw .route-line path{stroke-dashoffset:0!important;transition:none!important}
  .prog{display:none}
}