/* ============================================================
   THE BRIDGE — design system
   Tokens first. Nothing below hard-codes a colour.
   ============================================================ */
:root{
  --bg:#EDEFF2; --surface:#FFFFFF; --surface2:#F5F7F9; --surface3:#E4E8ED;
  --line:#D6DBE2; --line-soft:#E5E9EE;
  --ink:#131820; --ink2:#414B59; --muted:#6E7887;
  --product:#1F4FD8; --product-bg:#E7ECFC;
  --tech:#98680F;   --tech-bg:#F7EEDC;
  --data:#6B3FA0;   --data-bg:#EFE8F8;
  --ai:#0B7370;     --ai-bg:#DDF0EF;
  --bridge:#A6335A; --bridge-bg:#FBE6EC;
  --good:#1C6E52;   --warn:#96650F;
  --shadow:0 1px 2px rgba(19,24,32,.05), 0 10px 30px -14px rgba(19,24,32,.20);
  --shadow-lg:0 2px 6px rgba(19,24,32,.06), 0 24px 60px -24px rgba(19,24,32,.30);
  --radius:12px; --radius-sm:8px;
  --f-display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --f-prose:"Source Serif 4",Georgia,"Times New Roman",serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --maxw:1180px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D1015; --surface:#151A21; --surface2:#1A2029; --surface3:#222A34;
    --line:#2B333E; --line-soft:#222A34;
    --ink:#E7EAEE; --ink2:#B8C1CD; --muted:#8B95A3;
    --product:#89A8FF; --product-bg:#1B2440;
    --tech:#E0AE5C;   --tech-bg:#33280F;
    --data:#B79BF0;   --data-bg:#2A1F42;
    --ai:#54CBC6;     --ai-bg:#0F2E2D;
    --bridge:#F0799E; --bridge-bg:#3A1723;
    --good:#5FCBA3;   --warn:#E0B45C;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 36px -18px rgba(0,0,0,.7);
    --shadow-lg:0 2px 8px rgba(0,0,0,.5), 0 30px 70px -30px rgba(0,0,0,.85);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0D1015; --surface:#151A21; --surface2:#1A2029; --surface3:#222A34;
  --line:#2B333E; --line-soft:#222A34;
  --ink:#E7EAEE; --ink2:#B8C1CD; --muted:#8B95A3;
  --product:#89A8FF; --product-bg:#1B2440;
  --tech:#E0AE5C;   --tech-bg:#33280F;
  --data:#B79BF0;   --data-bg:#2A1F42;
  --ai:#54CBC6;     --ai-bg:#0F2E2D;
  --bridge:#F0799E; --bridge-bg:#3A1723;
  --good:#5FCBA3;   --warn:#E0B45C;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 36px -18px rgba(0,0,0,.7);
  --shadow-lg:0 2px 8px rgba(0,0,0,.5), 0 30px 70px -30px rgba(0,0,0,.85);
  color-scheme:dark;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-prose); font-size:17.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
h1,h2,h3,h4,h5{font-family:var(--f-display); font-weight:600; letter-spacing:-.02em; text-wrap:balance; margin:0}
h1{font-size:clamp(2.15rem,4.6vw,3.5rem); font-weight:800; line-height:1.02; letter-spacing:-.035em}
h2{font-size:clamp(1.55rem,2.8vw,2.15rem); line-height:1.12; letter-spacing:-.028em}
h3{font-size:1.22rem; line-height:1.24}
h4{font-size:1.02rem; line-height:1.3}
p{margin:0 0 1.05rem; max-width:68ch}
a{color:var(--product); text-decoration-thickness:1px; text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
strong,b{font-weight:600; color:var(--ink)}
em{font-style:italic}
hr{border:none; border-top:1px solid var(--line-soft); margin:2.5rem 0}
:focus-visible{outline:2px solid var(--product); outline-offset:3px; border-radius:4px}
.skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--bg);
  padding:.7rem 1.1rem; z-index:200; border-radius:0 0 8px 0; font-family:var(--f-display); font-weight:600}
.skip:focus{left:0}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 1.25rem}
@media(min-width:900px){ .wrap{padding:0 2rem} }
.narrow{max-width:760px}
section{padding:3.6rem 0}
@media(min-width:900px){ section{padding:4.6rem 0} }
.sec-line{border-top:1px solid var(--line-soft)}
.eyebrow{font-family:var(--f-mono); font-size:.7rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); display:block; margin-bottom:.75rem}
.lede{font-size:1.2rem; line-height:1.55; color:var(--ink2); max-width:64ch}
h1 + .lede, h1 + .value, h2 + .lede{margin-top:1.2rem}
.note{font-size:.9rem; color:var(--muted); font-family:var(--f-display); font-weight:400}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}

/* ---------- header ---------- */
header.site{position:sticky; top:0; z-index:100; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line)}
@supports not (backdrop-filter:blur(1px)){ header.site{background:var(--bg)} }
.hbar{display:flex; align-items:center; gap:1rem; height:64px}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); flex:none}
.brand svg{display:block; flex:none}
.brand b{font-family:var(--f-display); font-weight:800; font-size:1.02rem; letter-spacing:-.03em; line-height:1}
.brand span{display:block; font-family:var(--f-mono); font-size:.56rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted); margin-top:.22rem}
nav.main{margin-left:auto; display:none; align-items:center; gap:.15rem}
@media(min-width:940px){ nav.main{display:flex} }
nav.main a{font-family:var(--f-display); font-size:.9rem; font-weight:600; color:var(--ink2);
  text-decoration:none; padding:.45rem .7rem; border-radius:7px; transition:background .14s,color .14s; white-space:nowrap}
nav.main a:hover{background:var(--surface3); color:var(--ink)}
nav.main a[aria-current="page"]{color:var(--ink); background:var(--surface3)}
.hactions{margin-left:auto; display:flex; align-items:center; gap:.5rem}
@media(min-width:940px){ .hactions{margin-left:.6rem} }
.tgl{background:none; border:1px solid var(--line); color:var(--muted); width:34px; height:34px;
  border-radius:8px; cursor:pointer; display:grid; place-items:center; flex:none}
.tgl:hover{color:var(--ink); border-color:var(--ink2)}
.tgl svg{width:15px; height:15px}
.menu-btn{display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--line);
  background:none; border-radius:8px; cursor:pointer; color:var(--ink2)}
@media(min-width:940px){ .menu-btn{display:none} }
#mobnav{display:none; border-top:1px solid var(--line); background:var(--surface); padding:.7rem 0 1.1rem}
#mobnav.open{display:block}
#mobnav a{display:block; font-family:var(--f-display); font-weight:600; font-size:.98rem;
  color:var(--ink2); text-decoration:none; padding:.6rem 0; border-bottom:1px solid var(--line-soft)}
#mobnav a:last-child{border-bottom:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--f-display); font-weight:600; font-size:.94rem; text-decoration:none;
  padding:.62rem 1.15rem; border-radius:9px; border:1px solid transparent; cursor:pointer;
  transition:transform .12s, box-shadow .16s, background .16s, border-color .16s; white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink); color:var(--bg); box-shadow:var(--shadow)}
.btn-primary:hover{box-shadow:var(--shadow-lg)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink2); background:var(--surface)}
.btn-sm{font-size:.82rem; padding:.45rem .8rem}
.btnrow{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem}

/* ---------- hero ---------- */
.hero{padding:3.4rem 0 0; position:relative; overflow:hidden}
@media(min-width:900px){ .hero{padding:5rem 0 0} }
.hero h1 em{font-style:normal; color:var(--bridge)}
.hero .lede{margin-top:1.4rem; font-size:1.24rem}
.heroart{margin-top:2.2rem; position:relative}
.heroart svg{width:100%; height:auto; display:block}
.creed{display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; margin-top:2.6rem}
@media(min-width:820px){ .creed{grid-template-columns:repeat(3,1fr)} }
.creed div{background:var(--surface); padding:1.25rem 1.35rem}
.creed .k{font-family:var(--f-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); display:block; margin-bottom:.5rem}
.creed .v{font-family:var(--f-display); font-weight:600; font-size:1.04rem; line-height:1.34}

/* ---------- cards / grids ---------- */
.grid{display:grid; gap:1.1rem}
.g2{grid-template-columns:1fr} .g3{grid-template-columns:1fr} .g4{grid-template-columns:1fr}
@media(min-width:700px){ .g2{grid-template-columns:repeat(2,1fr)} .g4{grid-template-columns:repeat(2,1fr)} }
@media(min-width:960px){ .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} }
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.4rem 1.5rem; box-shadow:var(--shadow); display:flex; flex-direction:column}
.card h3,.card h4{margin-bottom:.55rem}
.card p{font-size:.97rem; color:var(--ink2); margin-bottom:0}
.card p + p{margin-top:.75rem}
.card .more{margin-top:auto; padding-top:1.1rem}
a.card{text-decoration:none; color:inherit; transition:transform .14s, box-shadow .16s, border-color .16s}
a.card:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:var(--ink2)}
a.card .go{font-family:var(--f-display); font-weight:600; font-size:.9rem; color:var(--product)}
.card-top{border-top:3px solid var(--line)}
.t-product{border-top-color:var(--product)} .t-tech{border-top-color:var(--tech)}
.t-data{border-top-color:var(--data)} .t-ai{border-top-color:var(--ai)} .t-bridge{border-top-color:var(--bridge)}

/* ---------- pills ---------- */
.pill{display:inline-flex; align-items:center; gap:.35rem; font-family:var(--f-mono);
  font-size:.64rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  padding:.2rem .5rem; border-radius:5px; border:1px solid transparent; white-space:nowrap}
.p-product{color:var(--product); background:var(--product-bg)}
.p-tech{color:var(--tech); background:var(--tech-bg)}
.p-data{color:var(--data); background:var(--data-bg)}
.p-ai{color:var(--ai); background:var(--ai-bg)}
.p-bridge{color:var(--bridge); background:var(--bridge-bg)}
.p-plain{color:var(--muted); background:var(--surface2); border-color:var(--line)}
.p-soon{color:var(--warn); background:transparent; border-color:currentColor}
.pillrow{display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.8rem}

/* ---------- lists ---------- */
ul.clean{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.6rem}
ul.clean li{padding-left:1.15rem; position:relative; font-size:.99rem; color:var(--ink2); max-width:70ch}
ul.clean li::before{content:""; position:absolute; left:0; top:.62em; width:5px; height:5px;
  border-radius:50%; background:var(--muted)}
ul.clean li b{color:var(--ink)}
ol.steps{list-style:none; padding:0; margin:0; counter-reset:s; display:flex; flex-direction:column; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
ol.steps li{counter-increment:s; background:var(--surface); padding:1rem 1.25rem;
  display:grid; grid-template-columns:2.2rem 1fr; gap:.9rem; align-items:start}
ol.steps li::before{content:counter(s,decimal-leading-zero); font-family:var(--f-mono);
  font-size:.72rem; color:var(--bridge); padding-top:.28rem}
ol.steps b{display:block; font-family:var(--f-display); font-weight:600; font-size:1rem; margin-bottom:.2rem}
ol.steps p{margin:0; font-size:.95rem; color:var(--ink2)}

/* ---------- callout ---------- */
.callout{border:1px solid var(--line); border-left:3px solid var(--bridge); background:var(--surface);
  border-radius:0 var(--radius) var(--radius) 0; padding:1.2rem 1.45rem; margin:1.8rem 0}
.callout .eyebrow{color:var(--bridge)}
.callout p:last-child{margin-bottom:0}
.callout.good{border-left-color:var(--good)} .callout.good .eyebrow{color:var(--good)}
.callout.warn{border-left-color:var(--warn)} .callout.warn .eyebrow{color:var(--warn)}
.callout.data{border-left-color:var(--data)} .callout.data .eyebrow{color:var(--data)}

/* ---------- value block (top of every service page) ---------- */
.value{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem 1.7rem; box-shadow:var(--shadow); margin:2rem 0}
.value .eyebrow{color:var(--bridge)}
.value p{font-family:var(--f-display); font-weight:600; font-size:1.22rem; line-height:1.4;
  color:var(--ink); margin-bottom:0; letter-spacing:-.015em; max-width:60ch}
.outcomes{display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; margin:1.6rem 0}
@media(min-width:760px){ .outcomes{grid-template-columns:repeat(3,1fr)} }
.outcomes div{background:var(--surface); padding:1.15rem 1.25rem}
.outcomes b{display:block; font-family:var(--f-display); font-weight:600; font-size:.98rem; margin-bottom:.3rem}
.outcomes p{margin:0; font-size:.92rem; color:var(--ink2)}

/* ---------- facts strip ---------- */
.facts{display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; margin:1.6rem 0}
@media(min-width:640px){ .facts{grid-template-columns:repeat(2,1fr)} }
@media(min-width:960px){ .facts{grid-template-columns:repeat(4,1fr)} }
.facts div{background:var(--surface); padding:1.05rem 1.2rem}
.facts dt{font-family:var(--f-mono); font-size:.63rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.35rem}
.facts dd{margin:0; font-family:var(--f-display); font-weight:600; font-size:1rem; line-height:1.3}

/* ---------- table ---------- */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); margin:1.5rem 0}
table{border-collapse:collapse; width:100%; min-width:540px; font-size:.94rem}
th,td{text-align:left; padding:.8rem 1rem; border-bottom:1px solid var(--line-soft); vertical-align:top}
th{font-family:var(--f-mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); font-weight:500; background:var(--surface2)}
tr:last-child td{border-bottom:none}
td b{font-family:var(--f-display); font-weight:600}

/* ---------- forms ---------- */
.form{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.5rem 1.6rem; box-shadow:var(--shadow); max-width:560px}
.form label{display:block; font-family:var(--f-display); font-weight:600; font-size:.9rem; margin-bottom:.4rem}
.form input{width:100%; font:inherit; font-size:1rem; padding:.66rem .85rem; border-radius:9px;
  border:1px solid var(--line); background:var(--surface2); color:var(--ink)}
.form input:focus{outline:2px solid var(--product); outline-offset:1px}
.form .row{margin-bottom:1rem}
.form .fine{font-size:.84rem; color:var(--muted); margin:1rem 0 0}
.form .btn{width:100%}
.reveal{display:none; margin-top:1.2rem; padding:1.1rem 1.25rem; border-radius:9px;
  background:var(--good); color:#fff; font-family:var(--f-display); font-weight:600; font-size:.96rem}
:root[data-theme="dark"] .reveal, :root:not([data-theme="light"]) .reveal{color:#0D1015}
.reveal.on{display:block}
.formerr{display:none; margin:0 0 .8rem; padding:.6rem .8rem; border-radius:var(--radius-sm);
  background:var(--bridge-bg); color:var(--bridge); border:1px solid var(--bridge);
  font-family:var(--f-mono); font-size:.78rem; line-height:1.5}
.formerr.on{display:block}
table.pricing td.price{font-family:var(--f-display); font-weight:600; white-space:nowrap;
  font-variant-numeric:tabular-nums; color:var(--ink)}
table.pricing td.price .pn{display:block; font-family:var(--f-mono); font-size:.68rem; font-weight:400;
  letter-spacing:.05em; color:var(--muted); white-space:normal; margin-top:.15rem}
@media(max-width:680px){
  table.pricing thead{display:none}
  table.pricing tr{display:flex; flex-direction:column; gap:.35rem; padding:1rem 0}
  table.pricing td{border:none; padding:0}
  table.pricing td.price{order:2; font-size:1.15rem; white-space:normal}
  table.pricing td:last-of-type{order:3}
  table.pricing tbody tr + tr{border-top:1px solid var(--line-soft)}
}
input[aria-invalid="true"]{border-color:var(--bridge)}
.reveal a{color:inherit; text-decoration:underline}

/* ---------- breadcrumbs ---------- */
.crumbs{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.06em; color:var(--muted);
  padding:1.3rem 0 0; display:flex; flex-wrap:wrap; gap:.4rem; align-items:center}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--ink); text-decoration:underline}
.crumbs span[aria-current]{color:var(--ink2)}

/* ---------- CTA band ---------- */
.cta{background:var(--ink); color:var(--bg); border-radius:var(--radius); padding:2.2rem 1.8rem;
  margin:0; display:flex; flex-direction:column; gap:1.2rem}
@media(min-width:860px){ .cta{flex-direction:row; align-items:center; justify-content:space-between; padding:2.4rem 2.6rem} }
.cta h2{color:var(--bg); font-size:clamp(1.4rem,2.4vw,1.85rem); max-width:22ch}
.cta p{color:var(--bg); opacity:.72; margin:.6rem 0 0; font-size:1rem; max-width:46ch}
.cta .btn-primary{background:var(--bg); color:var(--ink)}
.cta .btn-ghost{color:var(--bg); border-color:rgba(255,255,255,.28)}
:root[data-theme="dark"] .cta .btn-ghost, :root:not([data-theme="light"]) .cta .btn-ghost{border-color:rgba(0,0,0,.28)}
.cta .btnrow{margin-top:0; flex:none}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line); background:var(--surface2); margin-top:4rem; padding:3rem 0 2rem}
.fgrid{display:grid; gap:2rem 1.5rem; grid-template-columns:1fr}
@media(min-width:700px){ .fgrid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ .fgrid{grid-template-columns:1.4fr 1fr 1fr 1fr} }
.fcol h4{font-family:var(--f-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:500; margin-bottom:.85rem}
.fcol ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem}
.fcol a{font-family:var(--f-display); font-size:.92rem; font-weight:500; color:var(--ink2); text-decoration:none}
.fcol a:hover{color:var(--ink); text-decoration:underline}
.fcol p{font-size:.92rem; color:var(--muted); max-width:34ch}
.fbot{margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.8rem 1.5rem; align-items:center; justify-content:space-between;
  font-family:var(--f-mono); font-size:.68rem; color:var(--muted); letter-spacing:.04em}
.fbot a{color:var(--muted)}

/* ---------- misc ---------- */
.tree{list-style:none; padding:0; margin:0}
.tree ul{list-style:none; padding-left:1.4rem; margin:.5rem 0 0; border-left:1px solid var(--line)}
.tree li{margin:.45rem 0; font-family:var(--f-display); font-size:.96rem}
.tree li a{font-weight:600; text-decoration:none}
.tree li a:hover{text-decoration:underline}
.tree .d{font-family:var(--f-prose); font-weight:400; color:var(--muted); font-size:.9rem}
.anchorlist{display:flex; flex-wrap:wrap; gap:.5rem; margin:1.4rem 0 0}
.anchorlist a{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.05em; padding:.35rem .7rem;
  border:1px solid var(--line); border-radius:99px; text-decoration:none; color:var(--ink2); background:var(--surface)}
.anchorlist a:hover{border-color:var(--ink2); color:var(--ink)}
.portrait{margin:0}
.portrait img{display:block; width:100%; height:auto; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--surface2)}