/* OPENBIDX v3 — trade-paper / rate-card direction */
:root{
  --paper:#FAF8F4;
  --ink:#181511;
  --ink-soft:#4A453C;
  --hair:#D9D4C8;
  --rule:#181511;
  --red:#C8331F;
  --green:#0B7A44;
  --yellow:#F2CD4E;
  --mono:'IBM Plex Mono',monospace;
  --disp:'Archivo',sans-serif;
  --serif:'Source Serif 4',Georgia,serif;
  --max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--serif);
  color:var(--ink);background:var(--paper);
  line-height:1.68;font-size:17px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--disp);font-weight:800;line-height:.98;letter-spacing:-0.015em;text-transform:uppercase}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{color:var(--red)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.sc{font-family:var(--disp);font-weight:600;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase}
.mono{font-family:var(--mono)}
.hl{background:linear-gradient(180deg,transparent 56%,var(--yellow) 56%);padding:0 2px}

/* ---------- Masthead ---------- */
header.site{background:var(--paper);position:sticky;top:0;z-index:60}
.mast{display:flex;align-items:center;justify-content:space-between;padding:20px 0 14px}
.brand{display:flex;align-items:baseline;gap:12px;text-decoration:none;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand .sq{width:13px;height:13px;background:var(--red);display:inline-block;align-self:center}
.brand .word{font-family:var(--disp);font-weight:900;font-size:26px;letter-spacing:-0.02em;text-transform:uppercase}
.brand .word b{color:var(--red);font-weight:900}
nav.menu{display:flex;gap:26px;align-items:center}
nav.menu a{font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink);padding-bottom:2px;border-bottom:2px solid transparent}
nav.menu a:hover{border-bottom-color:var(--red);color:var(--ink)}
nav.menu a.active{border-bottom-color:var(--ink)}
nav.menu a.cta{border:2px solid var(--ink);padding:9px 18px;border-bottom-width:2px}
nav.menu a.cta:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.mastrule{border-top:3px solid var(--rule);border-bottom:1px solid var(--rule);height:7px}
#navToggle{display:none;background:none;border:2px solid var(--ink);padding:6px 10px;cursor:pointer;font-size:16px;line-height:1;font-family:var(--mono)}

/* ---------- Meta line ---------- */
.metaline{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--hair);flex-wrap:wrap}
.metaline span{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.metaline b{color:var(--red);font-weight:500}

/* ---------- Hero ---------- */
.hero{padding:64px 0 72px}
.herogrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:60px;align-items:end}
.hero h1{font-size:clamp(46px,7.2vw,104px);letter-spacing:-0.025em}
.hero h1 .dot{color:var(--red)}
.hero .deck{font-size:20px;line-height:1.6;color:var(--ink-soft);max-width:560px;margin-top:30px;font-style:italic}
.hero .deck b{font-style:normal;color:var(--ink);font-weight:600}
.btnrow{display:flex;gap:16px;flex-wrap:wrap;margin-top:38px}
.btn{
  display:inline-block;font-family:var(--disp);font-weight:700;font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  border:2px solid var(--ink);color:var(--ink);padding:15px 30px;background:transparent;
  transition:background .12s,color .12s;
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.solid:hover{background:var(--red);border-color:var(--red);color:#fff}
.btn.inverse{border-color:var(--paper);color:var(--paper)}
.btn.inverse:hover{background:var(--paper);color:var(--ink)}

/* The tape (rates box) */
.tape{border:2px solid var(--ink);background:var(--paper)}
.tape .thead{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:2px solid var(--ink);background:var(--ink);color:var(--paper)}
.tape .thead .t{font-family:var(--disp);font-weight:700;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase}
.tape .thead .live{font-family:var(--mono);font-size:10.5px;color:#8CE0B0;letter-spacing:.1em}
.tape .rows{padding:14px 16px 16px;font-family:var(--mono);font-size:13px}
.tape .r{display:flex;align-items:baseline;gap:8px;padding:6.5px 0;border-bottom:1px dotted var(--hair)}
.tape .r:last-child{border-bottom:none}
.tape .r .k{white-space:nowrap;color:var(--ink)}
.tape .r .dots{flex:1;border-bottom:1.5px dotted #B8B2A4;transform:translateY(-4px)}
.tape .r .v{white-space:nowrap;font-weight:500}
.tape .r .up{color:var(--green)}
.tape .r .dn{color:var(--red)}
.tape .foot{padding:9px 16px;border-top:1px solid var(--hair);font-family:var(--mono);font-size:10px;color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase}

/* ---------- Section headers ---------- */
.shead{margin-bottom:40px;border-top:3px solid var(--rule);padding-top:14px;display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
.shead .no{font-family:var(--mono);font-size:12px;color:var(--red);letter-spacing:.1em}
.shead .t{font-family:var(--disp);font-weight:800;font-size:13px;letter-spacing:.2em;text-transform:uppercase}
section.block{padding:72px 0}
section.block.tight{padding:52px 0}
h2.title{font-size:clamp(30px,4.4vw,54px);margin-bottom:20px;max-width:840px}
h2.title .dot{color:var(--red)}
p.sub{font-size:18.5px;color:var(--ink-soft);max-width:640px;margin-bottom:44px;font-style:italic}

/* ---------- Rate card (services) ---------- */
.ratecard{border-top:2px solid var(--ink)}
.rrow{
  display:grid;grid-template-columns:90px minmax(0,1.05fr) minmax(0,1.6fr);
  gap:34px;padding:32px 4px;border-bottom:1px solid var(--ink);
  transition:background .12s,color .12s;
}
.rrow:hover{background:var(--ink);color:var(--paper)}
.rrow:hover a{color:var(--paper)}
.rrow:hover .no{color:var(--paper)}
.rrow:hover .inc{color:#CFC9BD}
.rrow .no{font-family:var(--mono);font-size:12.5px;padding-top:8px;color:var(--red)}
.rrow h3{font-size:clamp(20px,2.2vw,27px);letter-spacing:-0.01em}
.rrow .lede{font-size:15.5px;font-style:italic;color:inherit;margin-top:10px;opacity:.85;text-transform:none;font-family:var(--serif);font-weight:400;line-height:1.6}
.rrow .inc{font-size:15px;color:var(--ink-soft);line-height:1.75}
.rrow .inc .lbl{font-family:var(--disp);font-weight:700;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;display:block;margin-bottom:8px;opacity:.7}
.rrow .inc ul{list-style:none}
.rrow .inc li{padding-left:18px;position:relative;margin-bottom:4px}
.rrow .inc li::before{content:"—";position:absolute;left:0;opacity:.5}

/* ---------- Figure blocks (split) ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:64px;align-items:start}
.split .fig{font-family:var(--mono);font-size:11.5px;color:var(--red);letter-spacing:.1em;margin-bottom:16px;text-transform:uppercase}
.split h2{font-size:clamp(26px,3.4vw,42px)}
.split .side{font-size:16.5px;font-style:italic;color:var(--ink-soft);margin-top:18px;max-width:380px}
.plist{border-top:2px solid var(--ink)}
.pitem{padding:24px 4px;border-bottom:1px solid var(--hair);display:grid;grid-template-columns:86px minmax(0,1fr);gap:24px}
.pitem .n{font-family:var(--mono);font-size:12px;color:var(--red);padding-top:5px}
.pitem h3{font-size:17px;margin-bottom:8px;letter-spacing:.02em}
.pitem p{font-size:15.5px;color:var(--ink-soft)}

/* ---------- Ledger (metrics) ---------- */
.ledger{border:2px solid var(--ink);display:grid;grid-template-columns:repeat(4,1fr)}
.ledger .m{padding:28px 24px;border-right:1px solid var(--ink)}
.ledger .m:last-child{border-right:none}
.ledger .num{font-family:var(--disp);font-weight:800;font-size:clamp(28px,3vw,40px);letter-spacing:-0.02em}
.ledger .num em{font-style:normal;color:var(--red)}
.ledger .lbl{font-size:13.5px;color:var(--ink-soft);margin-top:10px;line-height:1.5;font-style:italic}

/* ---------- Chips → spec list ---------- */
.speclabel{font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px;color:var(--ink)}
.specrow{font-family:var(--mono);font-size:14px;line-height:2.15;color:var(--ink-soft);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:14px 0;margin-bottom:30px}
.specrow b{color:var(--ink);font-weight:500}
.specrow .sep{color:var(--red);margin:0 10px}

/* ---------- Client roster (marquee) ---------- */
.roster{border-top:3px solid var(--rule);border-bottom:1px solid var(--rule);padding:0;background:var(--paper)}
.roster .inner{display:flex;align-items:stretch}
.roster .lab{
  flex:0 0 auto;display:flex;align-items:center;padding:22px 26px;border-right:1px solid var(--rule);
  font-family:var(--disp);font-weight:800;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  writing-mode:horizontal-tb;white-space:nowrap;background:var(--paper);z-index:3;
}
.marquee{overflow:hidden;position:relative;flex:1;display:flex;align-items:center}
.marquee::after{content:"";position:absolute;right:0;top:0;bottom:0;width:90px;background:linear-gradient(-90deg,var(--paper),transparent);z-index:2;pointer-events:none}
.marquee::before{content:"";position:absolute;left:0;top:0;bottom:0;width:40px;background:linear-gradient(90deg,var(--paper),transparent);z-index:2;pointer-events:none}
.mtrack{display:flex;align-items:center;width:max-content;animation:marq 34s linear infinite}
.marquee:hover .mtrack{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mtrack{animation:none;flex-wrap:wrap;width:auto}}
.mlogo{flex:0 0 auto;padding:22px 42px;display:flex;align-items:center;height:100%;filter:grayscale(1);opacity:.55;transition:filter .15s,opacity .15s}
.mlogo:hover{filter:grayscale(0);opacity:1}
.mlogo img{max-height:30px;max-width:150px;display:block}
.mlogo .txt{font-family:var(--disp);font-weight:800;font-size:17px;letter-spacing:.02em;color:var(--ink);white-space:nowrap;text-transform:uppercase}
.mlogo .txt.serif{font-family:var(--serif);font-weight:600;text-transform:none;font-size:19px}
.mlogo .txt.monoish{font-family:var(--mono);font-weight:500;font-size:14px;letter-spacing:.1em}

/* ---------- FAQ ---------- */
.faqwrap{border-top:2px solid var(--ink)}
details.faq{border-bottom:1px solid var(--ink)}
details.faq summary{
  cursor:pointer;padding:26px 4px;list-style:none;
  display:grid;grid-template-columns:86px minmax(0,1fr) 30px;gap:24px;align-items:baseline;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary .qn{font-family:var(--mono);font-size:12px;color:var(--red)}
details.faq summary .qt{font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:0;text-transform:none;line-height:1.3}
details.faq summary .pm{font-family:var(--mono);font-size:19px;color:var(--red);text-align:right}
details.faq[open] summary .pm::before{content:"–"}
details.faq:not([open]) summary .pm::before{content:"+"}
details.faq .body{padding:0 4px 28px 110px;font-size:16px;color:var(--ink-soft);max-width:760px}
details.faq .body p{margin-bottom:10px}
details.faq .body p:last-child{margin-bottom:0}

/* ---------- Case studies ---------- */
.case{display:grid;grid-template-columns:minmax(0,1.6fr) 270px;gap:48px;padding:44px 4px;border-bottom:1px solid var(--ink)}
.case:first-of-type{border-top:2px solid var(--ink)}
.case .kick{font-family:var(--mono);font-size:11.5px;color:var(--red);letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.case h3{font-size:clamp(22px,2.6vw,30px);margin-bottom:16px;max-width:620px;letter-spacing:-0.01em}
.case p{font-size:16px;color:var(--ink-soft);margin-bottom:12px;max-width:620px}
.numbers{border:2px solid var(--ink);align-self:start}
.numbers .nh{background:var(--ink);color:var(--paper);padding:10px 16px;font-family:var(--disp);font-weight:700;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase}
.numbers .r{padding:16px;border-bottom:1px solid var(--hair)}
.numbers .r:last-child{border-bottom:none}
.numbers .num{font-family:var(--disp);font-weight:800;font-size:30px;color:var(--green);letter-spacing:-0.02em}
.numbers .lbl{font-size:13px;color:var(--ink-soft);font-style:italic;line-height:1.5;margin-top:4px}

/* ---------- Contact ---------- */
.contactgrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:64px}
.field{margin-bottom:20px}
.field label{display:block;font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:8px}
.field input,.field textarea,.field select{
  width:100%;padding:13px 14px;border:1.5px solid var(--ink);background:var(--paper);
  font-family:var(--serif);font-size:16px;color:var(--ink);border-radius:0;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--red);outline-offset:1px}
button.btn{cursor:pointer}
.infocard{border-top:2px solid var(--ink);padding:20px 0 10px;margin-bottom:16px}
.infocard h3{font-size:13px;letter-spacing:.16em;margin-bottom:10px}
.infocard p{font-size:15.5px;color:var(--ink-soft)}

/* ---------- CTA band ---------- */
section.ctaband{background:var(--ink);color:var(--paper);padding:84px 0;border-top:3px solid var(--red)}
.ctaband .inner{display:flex;align-items:flex-end;justify-content:space-between;gap:44px;flex-wrap:wrap}
.ctaband h2{font-size:clamp(32px,5vw,64px);max-width:700px;letter-spacing:-0.02em}
.ctaband h2 .dot{color:var(--red)}
.ctaband p{color:#B7B0A2;margin-top:16px;font-size:16.5px;max-width:460px;font-style:italic}

/* ---------- Footer (colophon) ---------- */
footer.site{border-top:3px solid var(--rule);padding:0;background:var(--paper)}
footer.site .colophon{display:grid;grid-template-columns:2fr 1fr 1fr;gap:36px;padding:44px 0 36px}
footer.site h4{font-family:var(--disp);font-weight:800;font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px}
footer.site .colophon a{display:block;margin-bottom:9px;font-size:15px;text-decoration:none;border-bottom:none}
footer.site .colophon a:hover{color:var(--red)}
footer.site p{font-size:14.5px;color:var(--ink-soft);max-width:340px;font-style:italic}
.legal{border-top:1px solid var(--rule);padding:16px 0 20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.legal span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- Inner page hero ---------- */
.phero{padding:56px 0 50px;border-bottom:1px solid var(--rule)}
.phero .kick{font-family:var(--mono);font-size:12px;color:var(--red);letter-spacing:.12em;text-transform:uppercase;margin-bottom:20px}
.phero h1{font-size:clamp(38px,6vw,80px);letter-spacing:-0.02em;max-width:980px}
.phero .deck{font-size:19px;font-style:italic;color:var(--ink-soft);max-width:620px;margin-top:26px}

/* ---------- Grid cells (expertise) ---------- */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);border:2px solid var(--ink)}
.gcell{padding:26px 22px;border-right:1px solid var(--ink)}
.gcell:last-child{border-right:none}
.gcell .tag{font-family:var(--mono);font-size:10.5px;color:var(--red);letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.gcell p{font-size:14.5px;color:var(--ink-soft);line-height:1.6}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .herogrid{grid-template-columns:1fr;gap:48px;align-items:start}
  .split{grid-template-columns:1fr;gap:36px}
  .rrow{grid-template-columns:64px 1fr;gap:20px}
  .rrow .inc{grid-column:2}
  .ledger,.grid4{grid-template-columns:repeat(2,1fr)}
  .ledger .m:nth-child(2),.gcell:nth-child(2){border-right:none}
  .ledger .m:nth-child(-n+2),.gcell:nth-child(-n+2){border-bottom:1px solid var(--ink)}
  .case{grid-template-columns:1fr}
  .contactgrid{grid-template-columns:1fr}
  footer.site .colophon{grid-template-columns:1fr 1fr}
  details.faq .body{padding-left:4px}
}
@media (max-width:640px){
  body{font-size:16px}
  #navToggle{display:block}
  nav.menu{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:var(--paper);border-bottom:2px solid var(--ink);padding:22px 28px;gap:18px;align-items:flex-start;
  }
  nav.menu.open{display:flex}
  header.site{border-bottom:none}
  .brand .word{font-size:22px}
  .ledger,.grid4{grid-template-columns:1fr}
  .ledger .m,.gcell{border-right:none;border-bottom:1px solid var(--ink)}
  .ledger .m:last-child,.gcell:last-child{border-bottom:none}
  .roster .inner{flex-direction:column}
  .roster .lab{border-right:none;border-bottom:1px solid var(--rule);padding:16px 26px}
  details.faq summary{grid-template-columns:1fr 24px}
  details.faq summary .qn{display:none}
  .pitem{grid-template-columns:1fr}
  .hero{padding:44px 0 52px}
  section.block{padding:54px 0}
}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}