:root{
  --ink:#1a1714;--orange:#f4511e;--olive:#8a9a5b;--lime:#dbf743;
  --cream:#faf7f4;--warmgrey:#e5ddd7;--taupe:#a89e97;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--cream);color:var(--ink);font-family:'Manrope',sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased;}
a{color:var(--orange);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;transition:color 120ms ease;}
a:hover{color:#d84315;}
h1,h2{font-weight:800;letter-spacing:-.02em;line-height:1.15;}
h3,h4{font-weight:700;letter-spacing:-.01em;}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--olive);}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px;}
svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}

header.site{border-bottom:.5px solid var(--warmgrey);}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;}
header.site img{height:26px;display:block;}
header.site .for{font-size:13px;font-weight:600;color:var(--taupe);}

.hero{padding:64px 0 8px;}
.hero h1{font-size:44px;max-width:760px;margin-top:12px;}
.hero p.lead{margin-top:16px;max-width:640px;font-size:17px;}
.hero .meta{margin-top:12px;font-size:13px;color:var(--taupe);font-weight:600;}

.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:32px 0 0;}
.whoami{font-size:13.5px;color:var(--taupe);font-weight:600;}
.whoami button{background:none;border:0;font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0;}

.btn{border-radius:8px;border:0;padding:12px 20px;font-family:'Manrope',sans-serif;font-weight:600;font-size:15px;cursor:pointer;transition:background 120ms ease,color 120ms ease;display:inline-flex;align-items:center;gap:8px;}
.btn svg{width:18px;height:18px;}
.btn-primary{background:var(--orange);color:var(--cream);}
.btn-primary:hover{background:#d84315;}
.btn-quiet{background:transparent;color:var(--ink);border:.5px solid var(--warmgrey);}
.btn-quiet:hover{background:var(--warmgrey);}
.btn-small{padding:7px 14px;font-size:13px;}

section.block{padding:56px 0 0;}
section.block h2{font-size:28px;margin-top:6px;}
section.block p.sub{margin-top:8px;color:var(--taupe);font-weight:600;font-size:14px;max-width:640px;}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-top:24px;}
.card{border:.5px solid var(--warmgrey);border-radius:14px;background:var(--cream);padding:24px;display:flex;flex-direction:column;gap:10px;}
/* nowrap + min-width:0 keeps the duration chip pinned top right and lets a long
   title wrap instead, so the chip sits in the same place on every card. */
.card .row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:nowrap;}
.card .ttl{display:flex;align-items:flex-start;gap:10px;flex:1;min-width:0;}
.card .ttl h3{overflow-wrap:anywhere;}
.card .row .chip{flex:none;margin-top:1px;}
.card .ttl svg{width:20px;height:20px;color:var(--olive);flex:none;margin-top:2px;}
.card h3{font-size:17px;}
.card p.detail{font-size:14.5px;}
.card .when{font-size:12.5px;color:var(--taupe);font-weight:600;}
.card .foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:6px;flex-wrap:wrap;}

.badge{display:inline-block;border-radius:999px;padding:3px 12px;font-size:12px;font-weight:600;}
.badge.done{background:var(--lime);color:var(--ink);}
.badge.neutral{background:var(--warmgrey);color:var(--ink);}
.chip{display:inline-block;border:.5px solid var(--warmgrey);border-radius:999px;padding:3px 12px;font-size:12px;font-weight:600;white-space:nowrap;}

.commentbtn{background:none;border:0;font:inherit;font-size:13px;font-weight:600;color:var(--taupe);cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:0;transition:color 120ms ease;}
.commentbtn:hover{color:var(--ink);}
.commentbtn svg{width:16px;height:16px;}
.thread{border-top:.5px solid var(--warmgrey);margin-top:6px;padding-top:14px;display:none;}
.thread.open{display:block;}
.comment{font-size:14px;margin-bottom:12px;}
.comment b{font-weight:700;}
.comment .stamp{color:var(--taupe);font-size:12px;font-weight:600;margin-left:6px;}
.thread form{display:flex;gap:8px;margin-top:12px;}
.thread input[type=text]{flex:1;}

input[type=text],textarea{font-family:'Manrope',sans-serif;font-size:14.5px;color:var(--ink);background:var(--cream);border:.5px solid var(--warmgrey);border-radius:8px;padding:10px 12px;width:100%;transition:border-color 120ms ease;}
input[type=text]:focus,textarea:focus{outline:none;border-color:var(--taupe);}
textarea{resize:vertical;min-height:84px;}
label{display:block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);margin-bottom:6px;}
.field{margin-bottom:16px;}


dialog{border:.5px solid var(--warmgrey);border-radius:14px;background:var(--cream);color:var(--ink);padding:32px;max-width:520px;width:calc(100% - 48px);font-family:'Manrope',sans-serif;}
dialog::backdrop{background:rgba(26,23,20,.4);}
dialog h3{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:6px 0 8px;}
dialog p.hint{font-size:14px;color:var(--taupe);margin-bottom:20px;}
dialog .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px;}

.filters{display:flex;flex-wrap:wrap;gap:8px;padding:24px 0 0;}
.pill{display:inline-flex;align-items:center;gap:7px;border:.5px solid var(--warmgrey);border-radius:999px;
  background:var(--cream);color:var(--ink);font-family:'Manrope',sans-serif;font-size:13px;font-weight:600;
  padding:7px 14px;cursor:pointer;transition:background 120ms ease,color 120ms ease,border-color 120ms ease;}
.pill span{font-size:11px;font-weight:600;color:var(--taupe);}
.pill:hover{background:var(--warmgrey);}
.pill.on{background:var(--ink);color:var(--cream);border-color:var(--ink);}
.pill.on span{color:var(--cream);opacity:.6;}

/* Stage bar: queued, scoped, in build, testing, delivered.
   Marks are ink and warm grey, never orange, so the page keeps exactly one
   orange moment (the Add a request button). */
.stage{margin-top:2px;}
.stage .segs{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;}
.stage .seg{height:6px;border-radius:999px;background:var(--warmgrey);}
.stage .seg.on{background:var(--ink);}
/* minmax(0,1fr) + min-width:0 so a label can never force the column wider than
   its share and push the whole card out. Grid tracks default to min-content. */
.stage .stagerow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;margin-top:6px;}
.stage .sname{min-width:0;font-size:9.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--taupe);text-align:center;line-height:1.2;overflow-wrap:anywhere;}
.stage .sname.now{color:var(--ink);}
.card.done .stage .seg.on{background:var(--lime);}
.note{margin-top:20px;font-size:13.5px;color:var(--taupe);max-width:640px;}
.offline{margin-top:24px;border:.5px solid var(--warmgrey);border-radius:14px;padding:16px 20px;font-size:13.5px;color:var(--taupe);}

footer.site{margin-top:96px;border-top:.5px solid var(--warmgrey);}
footer.site .wrap{display:flex;align-items:center;justify-content:space-between;padding:24px;flex-wrap:wrap;gap:12px;}
footer.site img{height:22px;display:block;}
footer.site .contact{font-size:13.5px;font-weight:600;}

@media (max-width:720px){
  .hero h1{font-size:32px;}
}