/* ============================================================
   Develop2Any — Work / Build Index (archive-project)
   Translated from mockup/HTML (work-page mockup, bi-* system).
   Shared chrome (nav, footer, progress bar, grain) lives in main.css.
   ============================================================ */

.bi-page{display:block}

/* ---------- HERO ---------- */
.bi-hero-sec{padding-top:42px;padding-bottom:36px}
.bi-hero{display:grid;grid-template-columns:1.5fr 1fr;gap:54px;align-items:start}
.bi-title{font-family:'Archivo Black',sans-serif;font-size:82px;line-height:.92;letter-spacing:-2px;margin-top:14px}
.bi-tagline{font-family:'Source Serif 4',serif;font-size:29px;line-height:1.25;margin-top:22px;font-weight:400}
.bi-lede{font-size:14.5px;line-height:1.6;color:var(--muted);margin-top:18px;max-width:470px}

.bi-facts{border-left:1px solid var(--line);padding-left:34px;display:flex;flex-direction:column}
.bi-fact{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--line-2)}
.bi-fact:first-child{padding-top:0}
.bi-fact:last-child{border-bottom:0;padding-bottom:0}
.bi-fact-ico{flex:none;margin-top:4px;line-height:0}
.bi-fact-body{min-width:0}
.bi-fact-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.bi-fact-big{font-family:'Archivo Black',sans-serif;font-size:30px;letter-spacing:-1px}
.bi-fact-big.is-lime{color:var(--lime-3)}
.bi-fact-big.is-small{font-size:22px;letter-spacing:-.5px}
.bi-fact-label{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:1px;font-weight:700}
.bi-fact-label.is-block{margin-top:6px}
.bi-fact-sub{font-size:13px;color:var(--text-soft);margin-top:4px;line-height:1.45}

/* ---------- FILTER BAR ---------- */
.bi-filterbar-sec{padding-top:26px;padding-bottom:26px}
.bi-filterbar{display:flex;align-items:center;gap:22px}
.bi-search{flex:none;display:flex;align-items:center;gap:10px;min-width:300px;border:1px solid var(--border-divider);border-radius:30px;padding:11px 18px;background:#fff}
.bi-search svg{flex:none}
.bi-search input{border:none;outline:none;background:transparent;font-family:'Archivo',sans-serif;font-size:14px;color:var(--ink);width:100%}
.bi-pills{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bi-pill{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.5px;color:var(--text-2);background:transparent;border:1px solid var(--border-divider);border-radius:30px;padding:9px 18px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.bi-pill:hover{border-color:var(--ink)}
.bi-pill.is-on{background:var(--lime);border-color:var(--lime);color:var(--ink);font-weight:700}
.bi-reset{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.5px;color:var(--text-2)}
.bi-reset:hover{color:var(--ink)}

/* ---------- TABLE ---------- */
.bi-table-sec{padding-top:28px;padding-bottom:10px}
.bi-table{display:block}

.bi-row{display:grid;grid-template-columns:30px 1.4fr 1.5fr 1.7fr 1.2fr 1.3fr 1fr 32px;gap:18px;align-items:center}
.bi-head{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:1px;color:#888;padding-bottom:16px;border-bottom:1px solid var(--border-divider)}

a.bi-row{color:inherit;text-decoration:none;padding:24px 8px;border-bottom:1px solid var(--line-2);transition:background .2s ease}
a.bi-row:hover{background:var(--bg-hover)}
a.bi-row.is-featured{padding:26px 8px;background:#f0ecdf;border-left:3px solid var(--lime)}

.bi-c-num{font-family:'Space Mono',monospace;font-size:14px;color:#999;align-self:flex-start;line-height:1}
.bi-row.is-featured .bi-c-num{align-self:flex-start;line-height:0}

.bi-featured-tag{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:1px;color:var(--lime-3);background:#dfe89a;display:inline-block;padding:2px 7px;border-radius:3px}
.bi-name{font-family:'Source Serif 4',serif;font-size:19px;font-weight:600;display:block}
.bi-name.is-feat{font-family:'Archivo Black',sans-serif;font-size:26px;letter-spacing:-.5px;margin-top:8px}
.bi-kind{font-size:12px;color:#777;display:block;margin-top:2px}
.bi-name.is-feat + .bi-kind{font-size:13px}

.bi-proj-row{display:flex;align-items:center;gap:13px}
.bi-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;color:#fff;font-family:'Archivo Black',sans-serif;font-size:15px;overflow:hidden}
.bi-avatar img{width:100%;height:100%;object-fit:cover}

.bi-c-prob,.bi-c-did{font-size:13px;color:var(--muted);line-height:1.5}
.bi-c-stack{display:flex;flex-wrap:wrap;gap:6px}
.bi-chip{display:inline-flex;align-items:center;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.5px;color:var(--text-2);border:1px solid var(--border-divider);border-radius:3px;padding:5px 9px}

.bi-out-metric{font-family:'Archivo Black',sans-serif;font-size:24px;color:var(--lime-3);letter-spacing:-.5px}
.bi-out-metric.is-feat{font-size:30px;letter-spacing:-1px}
.bi-out-label{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:1px;color:#888;margin-top:5px}
.bi-out-sub{font-size:12.5px;color:var(--text-soft);margin-top:3px;line-height:1.4}

.bi-c-ind{font-size:13px;color:var(--text-2)}
.bi-c-arrow{text-align:right;font-size:17px}
.bi-arrow{display:inline-block;transition:transform .2s ease}
a.bi-row:hover .bi-arrow{transform:translateX(5px)}

/* staggered row reveal — JS toggles .is-in */
.bi-row.has-anim{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.bi-row.has-anim.is-in{opacity:1;transform:none}
.bi-row.is-hidden{display:none !important}

.bi-empty{display:none;text-align:center;padding:40px 0}
.bi-empty.is-shown{display:block}
.bi-empty-msg{font-family:'Source Serif 4',serif;font-size:18px;color:#777}
.bi-empty-btn{margin-top:16px;background:none;border:1px solid var(--red);color:var(--red);cursor:pointer;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.5px;padding:9px 18px;border-radius:30px}

.bi-viewall{text-align:center;padding:34px 0 8px}
.bi-viewall a{font-family:'Space Mono',monospace;font-size:13px;letter-spacing:1px;color:var(--red-2)}
.bi-viewall a:hover{text-decoration:underline}

/* ---------- VALUES (dark band) ---------- */
.bi-values-sec{background:var(--dark);color:#fff;padding:56px 0;margin-top:24px}
.bi-values{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.bi-value{padding:0 30px;border-left:1px solid #2e2e2e}
.bi-value:first-child{padding-left:0;border-left:0}
.bi-value:last-child{padding-right:0}
.bi-value-ico{display:block}
.bi-value-title{font-family:'Space Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.5px;margin-top:16px}
.bi-value-body{font-size:12.5px;color:#9a9a9a;line-height:1.55;margin-top:10px}

/* ---------- CLOSING CTA ---------- */
.bi-cta-sec{padding-top:48px;padding-bottom:48px}
.bi-cta{display:flex;align-items:center;gap:36px}
.bi-cta-scribblewrap{flex:none;display:flex;align-items:center;gap:20px}
.bi-cta-scribble{position:relative;padding:16px 24px}
.bi-cta-script{font-family:'Caveat',cursive;font-size:27px;font-weight:700;line-height:1.05;display:inline-block;position:relative;z-index:1;white-space:nowrap}
.bi-cta-circle{position:absolute;top:-4px;left:-12px;pointer-events:none}
.bi-cta-arrow{flex:none}
.bi-cta-mid{flex:1}
.bi-cta-heading{font-family:'Source Serif 4',serif;font-size:23px;font-weight:500;line-height:1.3}
.bi-cta-points{display:flex;gap:26px;margin-top:14px;flex-wrap:wrap}
.bi-cta-point{display:flex;align-items:center;gap:8px;font-family:'Source Serif 4',serif;font-size:15px}
.bi-cta-end{flex:none;text-align:center}
.bi-cta-btn{display:inline-flex;align-items:center;gap:12px;background:var(--red);color:#fff;font-size:15px;font-weight:600;padding:16px 38px;border-radius:3px;white-space:nowrap}
.bi-cta-email{font-family:'Source Serif 4',serif;font-size:14px;color:var(--text-2);margin-top:12px}
.bi-cta-email a{color:var(--red-2);text-decoration:underline}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
	.bi-hero{grid-template-columns:1fr;gap:34px}
	.bi-title{font-size:60px}
	.bi-values{grid-template-columns:1fr 1fr;row-gap:34px}
	.bi-value:nth-child(3){padding-left:0;border-left:0}
	.bi-cta{flex-wrap:wrap}
	.bi-filterbar{flex-wrap:wrap}
	.bi-reset{margin-left:0}
}
@media (max-width:860px){
	.bi-head{display:none}
	a.bi-row{display:block;border:1px solid var(--line-2);border-radius:10px;padding:18px 20px;margin-bottom:14px;background:var(--paper-2)}
	a.bi-row:hover{background:#f4eedd}
	a.bi-row.is-featured{border-left:3px solid var(--lime)}
	.bi-row > div{margin-top:12px}
	.bi-c-num{display:none}
	.bi-c-proj{margin-top:0}
	.bi-c-prob,.bi-c-did{display:block}
	.bi-c-arrow{display:none}
	.bi-c-stack{display:flex}
}
@media (max-width:600px){
	.bi-title{font-size:46px}
	.bi-values{grid-template-columns:1fr}
	.bi-search{min-width:0;width:100%}
}

@media (prefers-reduced-motion:reduce){
	.bi-row.has-anim{opacity:1 !important;transform:none !important;transition:none}
	.bi-arrow{transition:none}
}