/* services.hiveminds.online. No scripts, no inline styles (the page's CSP allows neither).
   Palette follows the landing page and the chat app. */
:root {
  color-scheme: dark light;
  --bg:#0e1116; --surface:#161a21; --raise:#1c222b; --fg:#e6eaf0; --dim:#93a0b4; --line:#242a33;
  --a1:#56b4e9; --a2:#e69f00; --a3:#00c08b; --bad:#ff6b6b; --ink:#0b0e12;
}
@media (prefers-color-scheme: light) {
  :root { --bg:#f6f7f9; --surface:#fff; --raise:#eef1f5; --fg:#16191d; --dim:#5c6470; --line:#dde1e7;
          --a1:#0072b2; --a2:#b06f00; --a3:#00795c; --bad:#c62828; --ink:#fff; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; }
a { color: var(--a1); }
h1, h2 { line-height: 1.15; margin: 0 0 12px; }
.top { display: flex; align-items: center; gap: 12px; max-width: 1040px; margin: 0 auto; padding: 18px 20px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; color: var(--fg); text-decoration: none; }
.brand b { color: var(--a1); font-weight: 700; }
.logo { width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%0A%3Cpolygon points=%2260.91,56.30 50.00,62.60 39.09,56.30 39.09,43.70 50.00,37.40 60.91,43.70%22 fill=%22%23E69F00%22/%3E%0A%3Cpolygon points=%2284.12,69.70 73.21,76.00 62.30,69.70 62.30,57.10 73.21,50.80 84.12,57.10%22 fill=%22%2356B4E9%22/%3E%0A%3Cpolygon points=%2260.91,83.10 50.00,89.40 39.09,83.10 39.09,70.50 50.00,64.20 60.91,70.50%22 fill=%22%2356B4E9%22/%3E%0A%3Cpolygon points=%2237.70,69.70 26.79,76.00 15.88,69.70 15.88,57.10 26.79,50.80 37.70,57.10%22 fill=%22%2356B4E9%22/%3E%0A%3Cpolygon points=%2237.70,42.90 26.79,49.20 15.88,42.90 15.88,30.30 26.79,24.00 37.70,30.30%22 fill=%22%2356B4E9%22/%3E%0A%3Cpolygon points=%2260.91,29.50 50.00,35.80 39.09,29.50 39.09,16.90 50.00,10.60 60.91,16.90%22 fill=%22%2356B4E9%22/%3E%0A%3Cpolygon points=%2284.12,42.90 73.21,49.20 62.30,42.90 62.30,30.30 73.21,24.00 84.12,30.30%22 fill=%22%2356B4E9%22/%3E%0A%3C/svg%3E") center / contain no-repeat; flex: 0 0 auto; }
.top .home { margin-left: auto; color: var(--dim); font-size: 15px; text-decoration: none; }
main { max-width: 1040px; margin: 0 auto; padding: 12px 20px 64px; }
.lead { color: var(--dim); font-size: 18px; max-width: 680px; margin: 0 0 28px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; color: var(--fg); text-decoration: none; }
.card:hover { border-color: var(--a1); }
.card img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; padding: 6px; box-sizing: border-box; background: var(--raise); }
.card div { padding: 14px 16px 18px; }
.card h2 { font-size: 19px; margin: 0 0 6px; }
.card p { margin: 0; color: var(--dim); font-size: 15px; }
.listing { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 36px; align-items: start; }
.listing > img { width: 100%; border-radius: 18px; border: 1px solid var(--line); background: var(--raise); }
.price { background: var(--raise); border-left: 3px solid var(--a2); padding: 10px 14px; border-radius: 8px; font-size: 15px; }
form { margin-top: 22px; display: grid; gap: 16px; }
label { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
label small { font-weight: 400; color: var(--dim); margin-top: -4px; }
input, select, textarea { font: inherit; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; width: 100%; }
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--a1); outline-offset: 1px; }
.req { color: var(--a2); }
.btn { justify-self: start; background: var(--a1); color: var(--ink); font: inherit; font-weight: 650; border: 0; border-radius: 12px; padding: 13px 26px; cursor: pointer; text-decoration: none; display: inline-block; }
.btn:hover { filter: brightness(1.08); }
.error { color: var(--bad); border: 1px solid var(--bad); border-radius: 10px; padding: 10px 14px; }
.fine { color: var(--dim); font-size: 14px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.done { max-width: 620px; }
.done .num { font-size: 15px; color: var(--dim); }
footer { max-width: 1040px; margin: 0 auto; padding: 24px 20px 40px; color: var(--dim); font-size: 14px; border-top: 1px solid var(--line); }
footer a { color: var(--dim); }


/* The front page (owner, 28 Oct 2026: "a proper front page"). */
.hero { padding: 26px 0 8px; }
.hero h1 { font-size: clamp(30px, 5vw, 46px); letter-spacing: -.02em; max-width: 760px; }
.hero .lead { margin-bottom: 22px; }
.sect { font-size: 22px; margin: 44px 0 16px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.steps li { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.steps b { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--a1); color: var(--ink); font-size: 15px; }
.steps h3 { font-size: 17px; margin: 12px 0 6px; }
.steps p { margin: 0; color: var(--dim); font-size: 15px; }
.facts { padding-left: 20px; color: var(--dim); max-width: 760px; }
.facts b { color: var(--fg); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.gallery a { display: block; color: var(--dim); text-decoration: none; font-size: 14px; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); background: var(--raise); }
/* A listing: its picture, its designs and photos beside the form. */
.crumb { margin: 0 0 14px; font-size: 15px; }
.crumb a { color: var(--dim); text-decoration: none; }
.side > img { width: 100%; border-radius: 18px; border: 1px solid var(--line); background: var(--raise); }
.designs h2 { font-size: 16px; margin: 22px 0 10px; color: var(--dim); font-weight: 600; }
.designs > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.designs figure { margin: 0; }
.designs img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 4px; border-radius: 12px; border: 1px solid var(--line); background: var(--raise); }
.designs figcaption { font-size: 13px; color: var(--dim); margin-top: 4px; text-align: center; }
@media (max-width: 760px) {
  .listing { grid-template-columns: 1fr; gap: 20px; }
  .side > img { max-width: 360px; }
  .sect { margin-top: 34px; }
}