/* ==========================================================================
   Willamette Pros — design system

   Shape: dark hero holding the fork, light content between, dark band at the
   bottom carrying the marquees. Bookended dark.

   One vivid accent, used sparingly. The moment there are three accents this
   stops reading as considered and starts reading as a template.

   Deliberately unrelated to Two Human Crew's navy/yellow blueprint identity —
   this site lists that company, and if the two look alike the independence
   story dies on sight.
   ========================================================================== */

:root {
  /* dark canvas */
  --ink-0: #0a100e;
  --ink-1: #101815;
  --ink-2: #17211d;
  --on-dark: #e9f1ed;
  --on-dark-dim: #93a69e;
  --hair-dark: #223029;

  /* light canvas */
  --paper: #fbfcfb;
  --surface: #ffffff;
  --sunk: #f1f4f2;
  --ink: #0c1512;
  --muted: #56655f;
  --line: #e2e7e4;
  --line-2: #c3ccc7;

  /* the one accent */
  --accent: #2fd98a;
  --accent-deep: #0e7a54;
  --accent-soft: #e6f8ef;

  --flag: #d9534f;
  --flag-deep: #8c2f1e;
  --ok: #2c6b4e;

  --display: "Sora", "Helvetica Neue", Arial, sans-serif;
  --body: "Manrope", -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --wide: 1120px;
  --narrow: 44rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
h3 { font-size: 1.1rem; letter-spacing: -0.015em; }
p { margin: 0; }
a { color: var(--accent-deep); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 20; }
.skip:focus { left: 0; }

.eyebrow {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}
.mono { font-family: var(--mono); font-size: .9em; }
.muted { color: var(--muted); }
.small { font-size: .87rem; }
.lede { font-size: 1.12rem; line-height: 1.5; color: var(--muted); max-width: 44ch; }
.lede-sm { color: var(--muted); font-size: .97rem; }

.demo-bar {
  margin: 0; padding: .55rem 1.25rem; background: var(--flag); color: #fff;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .03em; text-align: center;
}

/*
 * The beta bar says something a stranger has to actually read and act on —
 * that the site is unfinished, and whether their job reaches a real
 * contractor. The demo bar is a note to ourselves at .72rem of mono; this is
 * a warning to a member of the public, so it is set in the body face, larger,
 * and deeper red. Same bar, different audience.
 */
.beta-bar {
  font-family: var(--body); font-size: .88rem; letter-spacing: 0;
  padding: .75rem 1.25rem; line-height: 1.45; background: var(--flag-deep);
}

/* --- header ---------------------------------------------------------- */

.site-head { background: var(--ink-0); }
.bar {
  max-width: var(--wide); margin: 0 auto; padding: 1rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--on-dark); }
.brand-mark { width: 1.55rem; height: 1.55rem; flex: none; color: var(--accent); display: block; }
.brand-name { font-family: var(--display); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.02em; }
.nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.nav a { font-size: .9rem; font-weight: 500; text-decoration: none; color: var(--on-dark-dim); }
.nav a:hover { color: var(--accent); }

/* --- hero: dark, holds the fork -------------------------------------- */

.hero-band {
  background:
    radial-gradient(120% 90% at 12% -10%, rgba(47, 217, 138, .16), transparent 60%),
    var(--ink-0);
  color: var(--on-dark);
  border-bottom: 1px solid var(--hair-dark);
}
.hero {
  max-width: var(--wide); margin: 0 auto;
  padding: clamp(3rem, 8vw, 5.5rem) 1.5rem clamp(1.75rem, 4vw, 2.75rem);
}
/* The only line above the fork. Sized as a statement, not a billboard. */
.hero h1 {
  color: var(--accent);
  font-size: clamp(1.55rem, 3.4vw, 2.2rem);
  letter-spacing: -0.02em;
  max-width: 22ch;
}

.fork {
  max-width: var(--wide); margin: 0 auto;
  padding: 0 1.5rem clamp(3rem, 7vw, 5rem);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem;
}
.door {
  display: flex; flex-direction: column; gap: .5rem; text-decoration: none;
  background: var(--ink-1); border: 1px solid var(--hair-dark); border-radius: 14px;
  padding: 1.6rem 1.5rem; color: var(--on-dark);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.door:hover { border-color: var(--accent); background: var(--ink-2); transform: translateY(-2px); color: var(--on-dark); }
.door h2 { font-size: 1.22rem; max-width: 20ch; }
.door p { color: var(--on-dark-dim); font-size: .95rem; max-width: 40ch; flex: 1; }
/* An actual button, so the choice reads as a choice. */
.door-btn {
  align-self: flex-start; margin-top: 1rem;
  border-radius: 10px; padding: .65rem 1.15rem;
  font-size: .93rem; font-weight: 600;
  background: var(--ink-2); color: var(--on-dark);
  border: 1px solid var(--hair-dark);
  transition: background .18s ease, border-color .18s ease;
}
.door:hover .door-btn { background: var(--accent); color: #04170f; border-color: var(--accent); }
.door.primary { background: var(--accent); border-color: var(--accent); color: #04170f; }
.door.primary h2 { color: #04170f; }
.door.primary p { color: #0a3b28; }
.door.primary .door-btn { background: #04170f; color: #eafff5; border-color: #04170f; }
.door.primary:hover .door-btn { background: #000; color: #fff; border-color: #000; }
.door.primary:hover { background: #5ce3a6; border-color: #5ce3a6; color: #04170f; }

/* --- marquees: cities one way, skills the other ---------------------- */

.marquee-band {
  background: var(--ink-0); color: var(--on-dark);
  border-top: 1px solid var(--hair-dark);
  padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(2rem, 5vw, 3rem);
  overflow: hidden;
}
.marquee-head {
  max-width: var(--wide); margin: 0 auto clamp(1.5rem, 4vw, 2.25rem); padding: 0 1.5rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.marquee-head h2 { color: var(--on-dark); }
.marquee-head p { color: var(--on-dark-dim); max-width: 48ch; font-size: .97rem; }

/* The one line on this site allowed to be a slogan. It earns it by being true. */
.marquee-head p.oregonian {
  color: var(--on-dark); font-size: 1.05rem; font-weight: 500;
  max-width: none; margin: -.15rem 0 .35rem;
}

.marquee { display: flex; overflow: hidden; user-select: none; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee + .marquee { margin-top: .75rem; }
/*
 * Slow. These rows are a claim about coverage, not decoration — a town or a
 * job going past faster than it can be read is just motion. The two rows run
 * at different speeds so they never lock into a pattern.
 */
.marquee-track { display: flex; flex: none; gap: .6rem; padding-right: .6rem; min-width: 100%; animation: slide 170s linear infinite; }
.marquee.reverse .marquee-track { animation-direction: reverse; animation-duration: 210s; }
.marquee:hover .marquee-track { animation-play-state: paused; }

.chip {
  flex: none; white-space: nowrap;
  border: 1px solid var(--hair-dark); border-radius: 999px;
  padding: .5rem 1rem; font-size: .88rem; color: var(--on-dark-dim);
  background: var(--ink-1);
}
.chip.city { color: var(--on-dark); border-color: #2c4238; }
.chip.city b { font-weight: 600; }
.chip.city span { color: var(--on-dark-dim); font-weight: 400; font-family: var(--mono); font-size: .78em; }
.chip.skill { color: var(--accent); border-color: rgba(47, 217, 138, .3); background: rgba(47, 217, 138, .06); }

@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.marquee-foot {
  max-width: var(--wide); margin: clamp(1.5rem, 4vw, 2.25rem) auto 0; padding: 0 1.5rem;
  color: var(--on-dark-dim); font-size: .87rem; max-width: 60ch;
}

/* --- layout ----------------------------------------------------------- */

.page-head, .section, .form-wrap { padding-inline: 1.5rem; }
.page-head {
  max-width: var(--wide); margin: 0 auto; padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  display: flex; flex-direction: column; gap: .8rem; border-bottom: 1px solid var(--line);
}
.section { max-width: var(--wide); margin: 0 auto; padding-block: 2.5rem; display: flex; flex-direction: column; gap: 1.1rem; }
.prose { max-width: var(--narrow); }
.prose h2 { margin-top: 1.5rem; }
.prose p { color: #223029; }
.sec-head { display: flex; flex-direction: column; gap: .25rem; }

/* --- components ------------------------------------------------------- */

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .9rem; }
.tile {
  display: flex; flex-direction: column; gap: .3rem; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.2rem;
}
.tile:hover { border-color: var(--accent-deep); }
.tile-name { font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--ink); letter-spacing: -0.015em; }
.tile-sub { font-size: .88rem; color: var(--muted); }

/* Trade grid — big tap targets, two across on a phone. */
.trade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .7rem; }
.trade-tile {
  display: flex; flex-direction: column; gap: .2rem; justify-content: space-between;
  min-height: 5.25rem; padding: .95rem 1rem; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  transition: border-color .15s ease, background .15s ease;
}
.trade-tile:hover { border-color: var(--accent-deep); background: var(--accent-soft); }
.trade-name { font-family: var(--display); font-weight: 600; font-size: .98rem; color: var(--ink); letter-spacing: -0.015em; line-height: 1.2; }
.trade-sub { font-family: var(--mono); font-size: .7rem; color: var(--accent-deep); letter-spacing: .04em; }
.trade-tile.bare { background: transparent; border-style: dashed; }
.trade-tile.bare .trade-name { color: var(--muted); font-weight: 500; }
.trade-tile.bare .trade-sub { color: var(--muted); }
.trade-tile.bare:hover { border-color: var(--line-2); background: var(--sunk); }

.zipbox { max-width: 20rem; }

.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .35rem .8rem; font-size: .87rem; color: var(--muted); }
.chips.links li { padding: 0; }
.chips.links a { display: block; padding: .35rem .8rem; text-decoration: none; border-radius: 999px; }
.chips.links a:hover { background: var(--accent-soft); }

.btn {
  display: inline-block; background: var(--ink); color: #fff; text-decoration: none;
  font-family: var(--body); font-weight: 600; font-size: .98rem;
  padding: .75rem 1.35rem; border: 1px solid var(--ink); border-radius: 10px; cursor: pointer;
}
.btn:hover { background: #000; color: #fff; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { background: var(--sunk); color: var(--ink); }
.btn[disabled] { opacity: .55; cursor: default; }

.badge {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .28rem .6rem; border: 1px solid currentColor; border-radius: 999px; white-space: nowrap;
}
.badge.ok { color: var(--ok); }
.badge.pending { color: #9a6a15; }
.badge.big { font-size: .76rem; padding: .38rem .8rem; display: inline-block; }

.v-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .5rem;
}
.v-card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.v-card h3 { font-size: 1.15rem; }
.v-card h3 a { text-decoration: none; color: var(--ink); }
.v-card h3 a:hover { color: var(--accent-deep); }
.v-trade { font-size: .86rem; color: var(--muted); }
.v-stat { font-size: .92rem; }
.v-note, .disclose {
  font-size: .84rem; color: var(--muted); background: var(--sunk);
  border-left: 3px solid var(--line-2); border-radius: 0 8px 8px 0; padding: .55rem .8rem;
}

.record { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.record dl { margin: 0; padding: 1.1rem 1.25rem; display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: .55rem 1.25rem; }
.record dt { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: .25rem; }
.record dd { margin: 0; font-size: .95rem; }

.review {
  margin: 0; background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; padding: 1rem 1.2rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.review p { font-size: 1.02rem; }
.review cite { font-style: normal; font-family: var(--mono); font-size: .73rem; color: var(--muted); letter-spacing: .03em; }

/*
 * Answers offered inside a chat message.
 *
 * The confirmation used to be a separate screen, which is startling — mid
 * conversation the person you were talking to disappears and a form arrives.
 * These sit under the message that asked, and vanish once one is pressed, so
 * scrolling back shows what was chosen rather than live buttons on a question
 * that was answered ten minutes ago.
 */
/*
 * Taking a lead off the bill, from the row it sits on. Deliberately small and
 * unceremonious — the policy is that a vendor's word is enough, so this should
 * feel like crossing a line out, not like filing a claim.
 */
.inline-dispute { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.inline-dispute input[type="text"] {
  font: inherit; font-size: .82rem; padding: .3rem .5rem; min-width: 11rem;
  border: 1px solid var(--line-2); border-radius: 7px; background: var(--surface); color: var(--ink);
}
.btn.small { font-size: .8rem; padding: .35rem .7rem; }

/*
 * The address read back before it is sent. Sits inside the chat thread, so it
 * is deliberately not a bubble — it is the conversation stopping to check.
 */
.addr-check { display: flex; flex-direction: column; gap: .6rem; margin: .9rem 0 0; padding: .95rem 1.05rem; background: var(--sunk); border: 1px solid var(--line); border-radius: 12px; }
.addr-check .review { font-family: var(--mono); font-size: .9rem; }
.addr-check .btn, .addr-check .step-back { align-self: flex-start; }

/*
 * Lead-class pills — the price band as a colour, cool to hot.
 *
 * Quick (grey) -> Standard (blue) -> Service (green) -> Project (amber) ->
 * Major (red). The class is derived from the price wherever it appears, so a
 * pill can never contradict the number beside it.
 */
.band {
  display: inline-block; font-family: var(--mono); font-size: .66rem;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .12rem .5rem; border-radius: 999px; border: 1px solid;
}
.band.b1 { color: #56655f; background: #eef1ef; border-color: #cfd6d2; }
.band.b2 { color: #1f4e8c; background: #e8f0fb; border-color: #b9d0ee; }
.band.b3 { color: #0e7a54; background: #e6f8ef; border-color: #a9dfc6; }
.band.b4 { color: #8a5a00; background: #fdf3df; border-color: #ecd39a; }
.band.b5 { color: #8c2f1e; background: #fbe9e6; border-color: #eab8ae; }

/*
 * The business editor's pickers. 438 skill checkboxes only work if they read
 * as a scannable grid inside collapsed trades, not a wall.
 */
.pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .2rem .9rem; margin: .5rem 0 .9rem; }
.pick { display: flex; align-items: baseline; gap: .45rem; font-size: .9rem; cursor: pointer; }
.pick input { flex: none; }
details > summary { cursor: pointer; font-weight: 600; padding: .35rem 0; }

.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; min-width: 520px; }
th, td { text-align: left; padding: .6rem .85rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--mono); font-weight: 500; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--sunk); }
tr:last-child td { border-bottom: none; }
td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

.urls {
  font-family: var(--mono); font-size: .8rem; line-height: 1.9; background: var(--ink-0); color: var(--on-dark-dim);
  border-radius: 12px; padding: 1rem 1.2rem; overflow-x: auto; white-space: pre;
}

/* --- forms ------------------------------------------------------------ */

.form-wrap { background: var(--sunk); border-top: 1px solid var(--line); padding-block: 3rem; }
.form-card {
  max-width: var(--narrow); margin: 0 auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: 16px; padding: 1.75rem 1.6rem;
  display: flex; flex-direction: column; gap: .85rem;
}
.lead-form { display: flex; flex-direction: column; gap: .85rem; margin-top: .3rem; }
.lead-form label, label.stack { display: flex; flex-direction: column; gap: .35rem; font-size: .85rem; font-weight: 600; }
.lead-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
input, select, textarea {
  font-family: var(--body); font-size: 1rem; font-weight: 400;
  padding: .7rem .8rem; border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--paper); color: var(--ink);
}
input:focus, select:focus, textarea:focus { border-color: var(--accent-deep); }
textarea { resize: vertical; }
.consent { font-size: .76rem; color: var(--muted); line-height: 1.5; }
.opt { font-weight: 400; color: var(--muted); font-size: .8rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error {
  font-size: .88rem; color: var(--flag-deep); background: #fdf0ee;
  border-left: 3px solid var(--flag-deep); border-radius: 0 8px 8px 0; padding: .55rem .75rem;
}

.match { display: flex; flex-direction: column; gap: 1rem; align-items: stretch; }
.match .btn { align-self: flex-start; }
.match-head { display: flex; flex-direction: column; gap: .3rem; }
.match-head .eyebrow { color: var(--accent-deep); }
.step-back {
  background: none; border: none; padding: 0; font: inherit; font-size: .87rem;
  color: var(--muted); cursor: pointer; text-decoration: underline; align-self: flex-start;
}
[hidden] { display: none !important; }

/* --- conversation ----------------------------------------------------- */

.thread { display: flex; flex-direction: column; gap: .6rem; }
.msg { display: flex; }
.msg p { margin: 0; padding: .65rem .9rem; max-width: 88%; font-size: .97rem; line-height: 1.45; border-radius: 14px; }
.msg.us { justify-content: flex-start; }
.msg.us p { background: var(--sunk); border-bottom-left-radius: 4px; }
.msg.them { justify-content: flex-end; }
.msg.them p { background: var(--ink); color: #fff; border-bottom-right-radius: 4px; }
.msg.thinking p { color: var(--muted); letter-spacing: .25em; }

/* --- phases (build brief style lists) --------------------------------- */

.phase { display: flex; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.phase-n { font-family: var(--mono); font-size: .78rem; color: var(--accent-deep); padding-top: .3rem; min-width: 2.2rem; }
.phase-b { display: flex; flex-direction: column; gap: .55rem; flex: 1; }

/* --- footer ----------------------------------------------------------- */

.site-foot {
  background: var(--ink-0); color: var(--on-dark-dim);
  padding: 2rem 1.5rem 3rem; border-top: 1px solid var(--hair-dark);
}
.foot-in { max-width: var(--wide); margin: 0 auto; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; align-items: baseline; }
.foot-in a { color: var(--on-dark-dim); text-decoration: none; }
.foot-in a:hover { color: var(--accent); }
.foot-legal { max-width: 64ch; margin: 1.25rem auto 0; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .lead-form .row { grid-template-columns: 1fr; }
  .record dl { grid-template-columns: 1fr; gap: .1rem; }
  .record dt { padding-top: .7rem; }
  .nav { gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .marquee-track { animation: none !important; }
  .marquee { mask-image: none; overflow-x: auto; }
}

/* --- trade search + quick connect ------------------------------------ */

.tradesearch { max-width: 26rem; }
.tradesearch input { font-size: 1.05rem; }
.connect-card { max-width: none; margin-bottom: 1.25rem; }
.connect-card .zipbox { max-width: 12rem; }
.call-btn { text-decoration: none; }
.calling { display: flex; flex-direction: column; gap: 1rem; }
.calling h2 { font-size: 1.5rem; }
.tellthem {
  background: var(--sunk); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem;
}
.cb summary { cursor: pointer; font-size: .9rem; color: var(--accent-deep); margin-top: .6rem; }
.cb .lead-form { margin-top: .7rem; }

/* --- abstract Oregon --------------------------------------------------- */

.marquee-head.with-map {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: start;
}
.marquee-head.with-map > div { display: flex; flex-direction: column; gap: .5rem; }
.ormap { margin: 0; display: flex; flex-direction: column; gap: .6rem; max-width: 25rem; }
.ormap svg { width: 100%; height: auto; }
/* Stroke matches the fill: it closes the hairline seams between adjacent zip
   polygons without drawing their borders, so each region reads as one flat
   shape rather than a mosaic. */
.ormap .orbase { fill: #253430; stroke: #253430; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ormap .oron { fill: var(--accent); stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ormap .place { fill: #04170f; stroke: #eafff5; stroke-width: 1.3; }
.ormap .placename { fill: #eafff5; font-family: var(--mono); font-size: 10px; paint-order: stroke; stroke: #0a100e; stroke-width: 3px; }
.ormap figcaption { font-size: .78rem; color: var(--on-dark-dim); line-height: 1.45; }

@media (max-width: 760px) {
  .marquee-head.with-map { grid-template-columns: 1fr; }
  .ormap { max-width: 15rem; }
}

/* --- job picker -------------------------------------------------------- */

/*
 * Groups first, jobs second. The groups are cards rather than pills because
 * there are only four or five of them and each one is a decision; the jobs
 * inside are pills because by then it is a shortlist.
 */
.grouplist { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .5rem; margin-bottom: .35rem; }
.grouppick {
  font: inherit; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: .2rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 12px; padding: .7rem .85rem;
}
.grouppick:hover { border-color: var(--accent-deep); background: var(--accent-soft); }
.grouppick.bare { color: var(--muted); border-style: dashed; }
.grouppick-name { font-size: .92rem; font-weight: 500; }
.grouppick-sub { font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; color: var(--muted); }

/* The job they picked, echoed above the form so it is clear what they are asking about. */
.picked { font-family: var(--mono); font-size: .76rem; letter-spacing: .04em; color: var(--muted); margin: 0 0 .3rem; }
.picked::before { content: "\2192\00a0"; }

.joblist { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .35rem; }
.jobpick {
  font: inherit; font-size: .86rem; cursor: pointer;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 999px; padding: .4rem .8rem;
}
.jobpick:hover { border-color: var(--accent-deep); background: var(--accent-soft); }
.jobpick.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.jobpick.bare { color: var(--muted); border-style: dashed; }
.jobpick-none { font-family: var(--mono); font-size: .68em; color: var(--muted); }
.jobpick.on .jobpick-none { color: #9fb5ab; }
.badge.demo { color: var(--flag); border-color: var(--flag); }