/* Transit Capital Corporation — site design system
   Ground: cool paper. Dark world: deep navy (hero + bands + footer).
   One family (Manrope 200/300/500) + IBM Plex Mono for labels and figures.
   Gold is the line; red belongs to the logo only. */

:root{
  --bg:#F2F2F6;
  --bg2:#E9E9F0;
  --ink:#14173A;
  --ink2:#4E5378;
  --ink3:#868BA8;
  --line:#DBDCE7;
  --navy:#252B65;
  --deep:#0D1130;
  --deep2:#141942;
  --gold:#FABA13;
  --golddk:#B8860B;
  --wht:#FFFFFF;
  --dim:rgba(255,255,255,.62);
  --dim2:rgba(255,255,255,.38);
  --grid:rgba(255,255,255,.055);
  --disp:'Manrope',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --pad:clamp(22px,6vw,88px);
}
*{box-sizing:border-box}
/* Deliberately NOT smooth. The homepage hero is scrubbed by scroll position,
   so an animated programmatic scroll (anchor jump, spacebar, arrow key) drags
   the animation along with it and the whole thing feels rubbery. :target
   scroll-margin-top below handles anchor offset without animating. */
html{scroll-behavior:auto}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--disp);font-weight:300;font-size:17px;line-height:1.66;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--gold);color:var(--deep)}

/* ---------- type ---------- */
h1,h2,h3{margin:0;font-weight:200;letter-spacing:.002em;text-wrap:balance}
.disp{font-size:clamp(34px,5vw,56px);line-height:1.06}
h2,.h2{font-size:clamp(26px,3.4vw,38px);line-height:1.14}
h3,.h3{font-size:19px;font-weight:500;letter-spacing:.01em;line-height:1.35}
p{margin:0 0 18px;max-width:56ch}
p:last-child{margin-bottom:0}
b,strong{font-weight:500}
.gold{color:var(--gold)}
.golddk{color:var(--golddk)}
.kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--golddk);margin:0 0 18px;display:flex;align-items:center;gap:14px;
  /* kickers are <p>, so without this they inherit the body copy's 56ch measure
     and wrap, stranding the rule on the first line */
  max-width:none;
}
.kicker::before{content:"";width:30px;height:1px;background:currentColor;opacity:.6}
.dark .kicker{color:var(--gold)}
.mono{font-family:var(--mono)}
.dek{font-size:clamp(17px,1.7vw,21px);color:var(--ink2);max-width:50ch}
.dark .dek{color:var(--dim)}
.note{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink3);line-height:1.8;max-width:74ch}
.dark .note{color:var(--dim2)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:14px var(--pad) 0;pointer-events:none}
.navin{
  pointer-events:auto;max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:rgba(243,243,248,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(20,23,58,.08);border-radius:999px;
  padding:10px 12px 10px 20px;
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand img{width:26px;height:26px}
.bw{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.bw em{font-style:normal;color:var(--ink3)}
.nlinks{display:flex;gap:22px}
.nlinks a{
  font-size:14px;font-weight:500;letter-spacing:.01em;text-decoration:none;color:var(--ink2);
  padding:6px 2px;border-bottom:1px solid transparent;
}
.nlinks a:hover,.nlinks a[aria-current]{color:var(--ink);border-bottom-color:var(--gold)}
.nright{display:flex;align-items:center;gap:8px}
.npill{
  font-size:13px;font-weight:500;text-decoration:none;color:var(--wht);
  background:var(--navy);border-radius:999px;padding:9px 18px;white-space:nowrap;
}
.npill:hover{background:#1C2152}
.menubtn{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  background:transparent;border:1px solid rgba(20,23,58,.22);color:var(--ink);
  border-radius:999px;padding:9px 16px;cursor:pointer;
}
.menubtn:hover{border-color:var(--ink)}
/* Two-tone focus ring. A single colour cannot work here: the site has light
   pages AND dark sections, so any one ring colour is invisible on one of them.
   The old ring was --gold (#FABA13) on the light background at 1.55:1 — a
   keyboard user could not see where they were. Now a dark inner ring carries
   light surfaces (15.5:1) and the gold halo carries dark ones (10.4:1), so one
   of the two always clears the 3:1 minimum. Mouse users never see either. */
.menubtn:focus-visible,.npill:focus-visible,a:focus-visible,button:focus-visible,
summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--deep);
  outline-offset:2px;
  box-shadow:0 0 0 5px var(--gold);
  border-radius:2px;
}
/* On dark grounds the inner ring would vanish into the background, so flip it. */
.hero :focus-visible,.foot :focus-visible,.menu :focus-visible,.dark :focus-visible{
  outline-color:var(--wht);
}
@media(max-width:940px){.nlinks{display:none}}
/* The three nav labels carry 'Building', so the bar needs ~950px of content.
   Drop the wordmark's second half before the links get squeezed. */
@media(max-width:1120px){.bw em{display:none}}
@media(max-width:520px){.navin{padding-left:16px}}

/* ---------- fullscreen menu ---------- */
.menu{position:fixed;inset:0;z-index:300;background:var(--deep);color:var(--wht);display:flex;flex-direction:column}
.menu[hidden]{display:none}
.menutop{display:flex;align-items:center;justify-content:space-between;padding:24px var(--pad)}
.menutop .bw{color:var(--wht)}
.menutop .bw em{color:var(--dim2)}
.closebtn{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  background:transparent;border:1px solid rgba(255,255,255,.28);color:var(--wht);
  border-radius:999px;padding:9px 16px;cursor:pointer;
}
.closebtn:hover{border-color:var(--gold);color:var(--gold)}
.menumid{flex:1;display:flex;align-items:center;justify-content:center;padding:0 var(--pad)}
.mlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(10px,2.6vh,22px);text-align:center}
.mlist[hidden]{display:none}
.mlist a,.mlist button{
  font-family:var(--disp);font-weight:200;font-size:clamp(26px,4.6vh,40px);line-height:1.2;
  color:var(--wht);background:none;border:0;padding:2px 6px;cursor:pointer;text-decoration:none;
  letter-spacing:.002em;
}
.mlist a:hover,.mlist button:hover{color:var(--gold)}
.mback{
  font-family:var(--mono) !important;font-size:11px !important;letter-spacing:.2em !important;
  text-transform:uppercase;color:var(--dim2) !important;margin-bottom:8px;
}
.mback:hover{color:var(--gold) !important}
.menufoot{padding:26px var(--pad);display:flex;justify-content:center;gap:26px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--dim2);text-transform:uppercase}
.menufoot a{color:var(--dim2);text-decoration:none}
.menufoot a:hover{color:var(--gold)}
body.menuopen{overflow:hidden}

/* ---------- sections ---------- */
.sec{padding:clamp(84px,12vw,160px) var(--pad)}
.sec.tight{padding-top:clamp(60px,8vw,110px);padding-bottom:clamp(60px,8vw,110px)}
.secin{max-width:1200px;margin:0 auto}
.narrow{max-width:840px}
.dark{background:var(--deep);color:var(--wht)}
.dark.grided{background:
  linear-gradient(var(--grid) 1px,transparent 1px),
  linear-gradient(90deg,var(--grid) 1px,transparent 1px),
  radial-gradient(120% 90% at 78% 18%, var(--deep2) 0%, var(--deep) 62%);
  background-size:88px 88px,88px 88px,auto}
.panel{background:var(--bg2)}

/* page hero for subpages */
.phero{
  background:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px),
    radial-gradient(120% 90% at 78% 18%, var(--deep2) 0%, var(--deep) 62%);
  background-size:88px 88px,88px 88px,auto;
  color:var(--wht);
  padding:clamp(140px,22vh,210px) var(--pad) clamp(56px,9vh,92px);
}
.phero h1{font-size:clamp(38px,6vw,64px);line-height:1.04;max-width:16ch}
.phero .dek{margin-top:20px}

/* ---------- layout helpers ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px)}
/* Grid items default to min-width:auto, so a column refuses to shrink below its
   longest unbreakable token. At 320px the email address plus the list indent
   held the contact column at 317px inside a 276px parent and the page scrolled
   sideways. Let the items shrink, and let long addresses wrap. */
.grid2>*,.grid3>*{min-width:0}
.stops a[href^="mailto:"],.foot a[href^="mailto:"]{overflow-wrap:anywhere}
@media(max-width:900px){.grid2,.grid3{grid-template-columns:1fr}}
.vgap{display:flex;flex-direction:column;gap:clamp(40px,7vw,84px)}

/* route-line divider */
.route{display:flex;align-items:center;gap:0;margin:clamp(30px,5vw,54px) 0}
.route .rl{flex:1;height:2px;background:var(--gold);opacity:.85}
.route .rs{width:9px;height:9px;border-radius:50%;border:2px solid var(--gold);background:transparent;margin:0 -1px}
.route .rs.fill{background:var(--gold)}

/* cards */
.card{background:var(--wht);border:1px solid var(--line);border-radius:6px;padding:clamp(28px,3.4vw,42px);
  display:flex;flex-direction:column;gap:14px;
  transition:background .35s ease,border-color .35s ease,transform .35s ease,box-shadow .35s ease,color .35s ease}
/* Hover fills the card instead of one card being permanently dark — the old
   middle-card-navy read as arbitrary emphasis. Guarded so touch never sticks. */
@media(hover:hover){
  .card:hover{background:var(--navy);border-color:var(--navy);color:var(--wht);
    transform:translateY(-3px);box-shadow:0 20px 46px -24px rgba(20,23,58,.5)}
  .card:hover p{color:var(--dim)}
  .card:hover .kicker,.card:hover a.cta,.card:hover .proof{color:var(--gold)}
}
.card:focus-within{background:var(--navy);border-color:var(--navy);color:var(--wht)}
.card:focus-within p{color:var(--dim)}
.card:focus-within .kicker,.card:focus-within a.cta,.card:focus-within .proof{color:var(--gold)}
@media(prefers-reduced-motion:reduce){.card{transition:none}}
.card.dk{background:var(--navy);border-color:var(--navy);color:var(--wht)}
.card.dk p{color:var(--dim)}
.card p{color:var(--ink2);font-size:16px}
.card .kicker{margin-bottom:2px}
.card h3{font-size:clamp(20px,2vw,24px);font-weight:200;letter-spacing:.002em;line-height:1.2}
.cardlink{margin-top:auto;padding-top:10px}
a.cta{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;color:var(--golddk);display:inline-flex;align-items:center;gap:10px;
}
a.cta::after{content:"→"}
a.cta:hover{color:var(--ink)}
.dark a.cta,.card.dk a.cta{color:var(--gold)}
.dark a.cta:hover,.card.dk a.cta:hover{color:var(--wht)}

/* buttons */
.btn{
  display:inline-block;font-size:14px;font-weight:500;text-decoration:none;
  border-radius:999px;padding:13px 26px;border:1px solid transparent;
}
.btn.navy{background:var(--navy);color:var(--wht)}
.btn.navy:hover{background:#1C2152}
.btn.gold{background:var(--gold);color:var(--deep)}
.btn.gold:hover{background:#E5A902}
.btn.ghost{border-color:rgba(20,23,58,.25);color:var(--ink)}
.btn.ghost:hover{border-color:var(--ink)}
.dark .btn.ghost{border-color:rgba(255,255,255,.3);color:var(--wht)}
.dark .btn.ghost:hover{border-color:var(--gold);color:var(--gold)}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
@media(max-width:820px){.stats{grid-template-columns:1fr}}
/* Four-up variant. This used to be an inline style on the investors page,
   which beat the media query above on specificity and held four columns at
   390px — the numbers overflowed the viewport by 13px and the page scrolled
   sideways. As a class it can respond. */
.stats.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.stats.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.stats.four{grid-template-columns:1fr}}
/* long uppercase mono labels are the thing that actually refuses to shrink */
.stat{min-width:0}
.stat .l{overflow-wrap:break-word}
.stat .n{font-weight:200;font-size:clamp(38px,4.6vw,58px);line-height:1;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}
.stat .n em{font-style:normal;color:var(--gold);font-weight:200}
.stat .l{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim2);margin-top:12px;line-height:1.7}
.light .stat .l,.stat.light .l{color:var(--ink3)}

/* imagery */
.imgblock{position:relative;border-radius:6px;overflow:hidden}
.imgblock img{width:100%;height:auto}
.imgcap{
  position:absolute;left:14px;bottom:12px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.85);background:rgba(13,17,48,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  padding:5px 10px;border-radius:3px;
}
figure{margin:0}
figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink3);margin-top:12px}

/* lists with stop markers */
ul.stops{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
ul.stops li{position:relative;padding-left:28px;color:var(--ink2);font-size:16.5px}
ul.stops li::before{
  content:"";position:absolute;left:2px;top:9px;width:8px;height:8px;border-radius:50%;
  border:2px solid var(--golddk);
}
.dark ul.stops li{color:var(--dim)}
.dark ul.stops li::before{border-color:var(--gold)}
ul.stops li b{color:var(--ink)}
.dark ul.stops li b{color:var(--wht)}

/* reveal — visible by default; JS hides below-fold elements just before observing,
   so no-JS readers and crawlers always see everything */
.rv{transition:opacity .7s ease,transform .7s ease}
.rv.prep{opacity:0;transform:translateY(16px)}
@media(prefers-reduced-motion:reduce){.rv{transition:none}.rv.prep{opacity:1;transform:none}}

/* placeholder (team bios) — must look unfinished */
.tbd{
  border:1.5px dashed var(--ink3);border-radius:6px;padding:14px 16px;
  font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--ink3);line-height:1.7;
  background:repeating-linear-gradient(-45deg,transparent 0 14px,rgba(20,23,58,.025) 14px 28px);
}
.tbd::before{content:"PLACEHOLDER · ";color:var(--golddk);letter-spacing:.18em}

/* team */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,26px)}
@media(max-width:1000px){.tgrid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.tgrid{grid-template-columns:1fr}}
.tcard{background:var(--wht);border:1px solid var(--line);border-radius:6px;padding:24px;display:flex;flex-direction:column;gap:12px}
.tmono{
  width:52px;height:52px;border-radius:50%;border:2px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--navy);font-weight:500;
}
.tcard .role{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.tcard h3{font-size:20px;font-weight:200}

/* tables */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:6px;background:var(--wht)}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:15px}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);font-weight:400;background:var(--bg2)}
tbody tr:last-child td{border-bottom:none}
td b{white-space:nowrap}
td{font-variant-numeric:tabular-nums}

/* forms */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.field input,.field select,.field textarea{
  font-family:var(--disp);font-weight:300;font-size:16px;color:var(--ink);
  background:var(--wht);border:1px solid var(--line);border-radius:5px;padding:13px 15px;
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--deep);outline-offset:1px;box-shadow:0 0 0 4px var(--gold);
  border-color:var(--deep)}
.formnote{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink3);line-height:1.8}

/* footer */
.foot{background:var(--deep);color:var(--wht);padding:clamp(56px,8vw,96px) var(--pad) 34px}
.footin{max-width:1200px;margin:0 auto}
.ftop{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(24px,4vw,56px)}
@media(max-width:960px){.ftop{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ftop{grid-template-columns:1fr}}
.fbrand{display:flex;flex-direction:column;gap:16px}
.fbrand .bw{color:var(--wht)}
.fbrand .bw em{color:var(--dim2)}
.fbrand p{color:var(--dim);font-size:15px;max-width:34ch}
.fcol h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim2);font-weight:400;margin:0 0 16px}
.fcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.fcol a{color:var(--dim);text-decoration:none;font-size:15px}
.fcol a:hover{color:var(--gold)}
.fmid{margin-top:clamp(36px,5vw,56px);padding-top:26px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:10px 34px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--dim)}
.fmid a{color:var(--dim);text-decoration:none}
.fmid a:hover{color:var(--gold)}
.fsmall{margin-top:26px;font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  color:var(--dim2);line-height:1.9;max-width:none}

/* card proof line — revealed on hover/focus, always shown where there is no hover */
.card .proof{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--golddk);margin:0;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .45s ease,opacity .35s ease,margin-top .45s ease;
}
.card:hover .proof,.card:focus-within .proof{max-height:72px;opacity:1;margin-top:2px}
.card.dk .proof{color:var(--gold)}
@media(hover:none){.card .proof{max-height:72px;opacity:1;margin-top:2px}}
@media(prefers-reduced-motion:reduce){.card .proof{transition:none}}

/* the tally — counting, shown as a count rather than three trophy numbers */
.tally{margin-top:clamp(36px,5vw,58px);border-top:1px solid rgba(255,255,255,.14);padding-top:26px}
.tallyhead{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 24px}
.tallylist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2vw,30px)}
@media(max-width:900px){.tallylist{grid-template-columns:repeat(2,1fr);gap:24px}}
@media(max-width:460px){.tallylist{grid-template-columns:1fr}}
.tallylist li{border-left:1px solid rgba(255,255,255,.18);padding-left:16px}
.tallylist b{display:block;font-weight:200;font-size:clamp(25px,2.7vw,34px);line-height:1;font-variant-numeric:tabular-nums}
.tallylist span{display:block;margin-top:9px;font-size:13.5px;line-height:1.5;color:var(--dim)}
.tallyfoot{margin-top:28px;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--dim2);max-width:none}

/* deep-linked sections must clear the fixed pill nav */
:target{scroll-margin-top:96px}

/* ---- touch tap targets -------------------------------------------------
   Pointer-coarse only, so nothing about the desktop design changes. Measured
   at 390px before this: Menu button 35px, .cta links 18px, footer links 19px,
   brand 26px — all below the 44px touch minimum, and Menu is the only way to
   navigate on a phone. Padding is added block-wise so nothing reflows
   horizontally. */
@media (hover:none){
  .menubtn,.npill,.brand{min-height:44px;display:inline-flex;align-items:center}
  .cta{padding-block:13px}
  .foot a{display:inline-block;padding-block:12px}
  .menu a{min-height:44px;display:inline-flex;align-items:center}
}

/* ---- small utilities ---------------------------------------------------
   .sronly: content for assistive tech only. The homepage hero needs an h1
   that the JS-injected headlines cannot provide.
   .meta: small secondary note beside a label. It was in use on the contact
   page before it was ever defined, so it rendered at full body size. */
.sronly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--ink3);
  text-transform:none}
.foot .meta,.hero .meta{color:rgba(255,255,255,.62)}

/* Honeypot: off-screen, never focusable, invisible to assistive tech.
   Bots fill it in; the server silently drops anything that has it set. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}