/* ContractorBids — marketing site
   Brand system v0.2 (June 2026). Restraint on screen, energy in the words. */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---------- Tokens ---------- */
:root{
  /* neutrals carry everything */
  --ink:#1F1C18; --graphite:#57514A; --stone:#8C8478; --stone-300:#CFC8BA;
  --paper:#F3EFE6; --warm-white:#FBF9F4;
  /* accent — points, never fills (<= 6% of any view) */
  --ochre:#B27B3C; --clay:#9C5B3F;

  --sans:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* 4px spacing scale — only these values */
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:64px; --s8:96px;
  --maxw:1200px; --gutter:24px;
}

/* ---------- Reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans); font-size:17px; line-height:1.5;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{background:var(--ochre); color:var(--warm-white)}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter)}
.band{padding-block:var(--s8); border-top:1px solid var(--stone-300)}
.band--tight{padding-block:var(--s7)}
.band--ink{background:var(--ink); color:var(--warm-white); border-top:none}
.band--ink .lead, .band--ink .sub{color:var(--stone-300)}

/* faint ledger rhythm behind hero — the 64px module */
.ledger{
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 63px,rgba(140,132,120,.16) 63px,rgba(140,132,120,.16) 64px);
}

/* ---------- Type ---------- */
.display{font-weight:800; font-size:clamp(40px,7vw,64px); line-height:.96; letter-spacing:-.035em}
.h2{font-weight:700; font-size:clamp(26px,3.5vw,30px); line-height:1.15; letter-spacing:-.02em}
.h3{font-weight:600; font-size:22px; line-height:1.3; letter-spacing:-.01em}
.lead{font-size:clamp(18px,2.2vw,22px); line-height:1.4; color:var(--graphite); font-weight:400}
.sub{color:var(--graphite)}
.small{font-size:14px; color:var(--graphite)}
.tight{max-width:62ch}

/* mono label, caps, tracked open */
.label{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--stone);
}
.label--accent{color:var(--ochre)}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* section numbering 01 / 02 */
.secnum{font-family:var(--mono); font-weight:600; font-size:13px; color:var(--ochre); letter-spacing:.06em}

/* ---------- Header ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(243,239,230,.85); backdrop-filter:saturate(150%) blur(8px);
  border-bottom:1px solid var(--stone-300);
}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.nav{display:flex; align-items:center; gap:var(--s5)}
.nav a.navlink{font-size:14px; color:var(--graphite)}
.nav a.navlink:hover{color:var(--ink)}

/* wordmark — Archivo 800, ink/bone only (never ochre) */
.wordmark{font-weight:800; letter-spacing:-.02em; font-size:19px; color:var(--ink)}
.wordmark .dot-ai{color:var(--graphite); font-weight:700}

.menu-btn{display:none; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  background:none; border:1px solid var(--stone-300); border-radius:6px; padding:8px 12px; cursor:pointer; color:var(--ink)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-weight:600; font-size:15px;
  padding:12px 20px; border-radius:8px; cursor:pointer; border:1px solid transparent; transition:transform .04s ease, background .15s ease}
.btn:active{transform:translateY(1px)}
.btn--accent{background:var(--ochre); color:var(--warm-white)}
.btn--accent:hover{background:#a06d33}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink); color:var(--warm-white)}
.btn--onink{background:var(--ochre); color:var(--warm-white)}
.btn--lg{padding:15px 26px; font-size:16px}

/* ---------- Hero ---------- */
.hero{padding-block:var(--s8) var(--s7)}
.hero .eyebrow{margin-bottom:var(--s4)}
.hero .display{margin-bottom:var(--s4); max-width:16ch}
.hero .lead{margin-bottom:var(--s6); max-width:54ch}
.cta-row{display:flex; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s7)}

/* stat strip — from -> to, tabular mono */
.stats{display:flex; gap:var(--s7); flex-wrap:wrap; align-items:flex-end;
  border-top:1px solid var(--stone-300); padding-top:var(--s4)}
.stat .label{display:block; margin-bottom:6px}
.stat .from-to{font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:600; font-size:clamp(22px,3vw,30px); letter-spacing:-.01em}
.stat .from-to .arrow{color:var(--ochre); padding-inline:8px}
.stat .from-to .from{color:var(--stone); text-decoration:line-through; text-decoration-color:var(--stone-300)}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:var(--s2)}
.chip{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--graphite);
  border:1px solid var(--stone-300); border-radius:999px; padding:6px 12px}

/* ---------- Section header device ---------- */
.sec-head{display:flex; align-items:baseline; gap:var(--s3); margin-bottom:var(--s6)}
.sec-head .h2{flex:none}
.kicker{margin-bottom:var(--s4)}

/* ---------- Cards / steps ---------- */
.grid{display:grid; gap:var(--s4)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--warm-white); border:1px solid var(--stone-300); border-radius:12px; padding:var(--s5); position:relative}
/* corner tick */
.card::before{content:''; position:absolute; top:14px; left:14px; width:10px; height:10px;
  border-top:2px solid var(--stone-300); border-left:2px solid var(--stone-300)}
.card .h3{margin-bottom:var(--s2); margin-top:var(--s3)}
.card .secnum{position:absolute; top:var(--s5); right:var(--s5)}

/* ---------- Line-item device (the signature) ---------- */
.sheet{background:var(--warm-white); border:1px solid var(--stone-300); border-radius:12px; padding:var(--s6); max-width:560px}
.sheet .sheet-cap{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:var(--s4)}
.li{display:flex; align-items:baseline; gap:12px; padding-block:12px}
.li .li-label{flex:none; color:var(--ink)}
.li .li-leader{flex:1; border-bottom:1px dotted var(--stone); transform:translateY(-4px)}
.li .li-fig{flex:none; font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--graphite)}
.li--total{border-top:2px solid var(--ink); margin-top:var(--s2); padding-top:var(--s4)}
.li--total .li-label{font-weight:700}
.li--total .li-fig{color:var(--ink); font-weight:600; font-size:19px}
.li--total .li-label::after{content:''; display:inline-block; width:8px; height:8px; background:var(--ochre); border-radius:2px; margin-left:10px; transform:translateY(-1px)}

/* feature list with mono ticks */
.flist{list-style:none; display:grid; gap:var(--s3)}
.flist li{display:flex; gap:12px; align-items:flex-start}
.flist .tick{font-family:var(--mono); color:var(--ochre); flex:none; line-height:1.5}

/* lanes (res / commercial) */
.lane{background:var(--warm-white); border:1px solid var(--stone-300); border-radius:12px; padding:var(--s5)}
.lane .label{margin-bottom:var(--s3)}
.phase{display:flex; gap:12px; align-items:baseline; padding-block:10px; border-top:1px solid var(--stone-300)}
.phase:first-of-type{border-top:none}
.phase .pn{font-family:var(--mono); font-size:12px; color:var(--ochre); font-weight:600; flex:none; width:22px}

/* ---------- Final CTA ---------- */
.cta-final{text-align:center}
.cta-final .display{margin-inline:auto; margin-bottom:var(--s5); max-width:18ch}
.note{font-family:var(--mono); font-size:13px; color:var(--stone); margin-top:var(--s5)}

/* ---------- Footer ---------- */
.site-foot{background:var(--ink); color:var(--stone-300); padding-block:var(--s7)}
.site-foot .wordmark{color:var(--warm-white)}
.site-foot .wordmark .dot-ai{color:var(--stone)}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:var(--s6); margin-bottom:var(--s6)}
.site-foot a{color:var(--stone-300)} .site-foot a:hover{color:var(--warm-white)}
.foot-col h4{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--stone); margin-bottom:var(--s3); font-weight:500}
.foot-col a{display:block; font-size:14px; margin-bottom:10px}
.foot-bar{border-top:1px solid #3a352f; padding-top:var(--s4); display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--s3); font-size:13px; color:var(--stone)}
.foot-sig{font-family:var(--mono); font-size:13px; color:var(--stone-300)}

/* ---------- Forms (request-access) ---------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4)}
.field{display:flex; flex-direction:column; gap:8px}
.field.col-span{grid-column:1 / -1}
.field label{font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--graphite)}
.field input,.field select,.field textarea{
  font-family:var(--sans); font-size:16px; color:var(--ink); background:var(--warm-white);
  border:1px solid var(--stone-300); border-radius:8px; padding:12px 14px}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--ochre); outline-offset:1px; border-color:var(--ochre)}
.form-note{font-family:var(--mono); font-size:13px; color:var(--stone); margin-top:var(--s4)}
.confirm{background:var(--warm-white); border:1px solid var(--stone-300); border-radius:12px; padding:var(--s6); text-align:center}

/* ---------- Utilities ---------- */
.mt2{margin-top:var(--s2)} .mt4{margin-top:var(--s4)} .mt6{margin-top:var(--s6)}
.center{text-align:center} .hide{display:none}
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s7); align-items:center}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .nav .navlink{display:none}
  .menu-btn{display:inline-block}
  .nav.open{position:absolute; top:64px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--stone-300); padding:var(--s3) var(--gutter)}
  .nav.open .navlink{display:block; padding:14px 0; border-top:1px solid var(--stone-300); font-size:16px}
  .nav.open .btn{margin-top:var(--s3)}
  .grid-3,.grid-2,.foot-grid,.form-grid,.split{grid-template-columns:1fr}
  .stats{gap:var(--s5)}
  .band{padding-block:var(--s7)}
}