:root {
  --bs-body-bg: #111210;
  --bs-body-color: #f6f5ef;
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  --accent: #fada48;
  --muted: #b8b9ae;
  --line: #34352e;
}

a { color: inherit; text-underline-offset: .2em; }
a:hover { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.skip-link { position: absolute; z-index: 1; background: var(--accent); color: #111210; padding: .75rem 1rem; }
.skip-link:hover { color: #111210; }

.container { --bs-gutter-x: 2.5rem; max-width: 1160px; }
.site-header, .site-footer { padding-block: 1.25rem; }
.site-header { border-bottom: 1px solid var(--line); }
.site-footer { border-top: 1px solid var(--line); }
.site-header nav, .site-footer nav { font-size: .875rem; color: var(--muted); }
.brand { display: inline-flex; align-items: center; gap: .45rem; font-size: 1.125rem; font-weight: 800; text-decoration: none; }

.hero { padding-block: clamp(3.5rem, 8vw, 7.5rem); }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; font-weight: 800; margin-bottom: 1rem; }
.hero h1, .legal h1 { font-size: clamp(2.65rem, 7.3vw, 6.15rem); font-weight: 850; line-height: 1; letter-spacing: -.07em; margin-bottom: 1.25rem; }
.hero h1 span { color: var(--accent); }
.hero-copy { font-size: clamp(1.075rem, 2.2vw, 1.3rem); max-width: 33ch; color: var(--muted); margin-bottom: 1.75rem; }
.btn-accent { --bs-btn-color: #1b190f; --bs-btn-bg: var(--accent); --bs-btn-hover-color: #1b190f; --bs-btn-hover-bg: #ffe575; --bs-btn-active-color: #1b190f; --bs-btn-active-bg: #e7c530; padding: .8rem 1.15rem; font-weight: 750; }
.btn-accent span { padding-left: .5rem; }

.job-board { border: 1px solid #48483d; border-radius: 1.15rem; background: #1b1c18; padding: clamp(.8rem, 3vw, 1.5rem); box-shadow: .5rem .5rem 0 #272619; }
.board-top { font-weight: 800; margin-bottom: 1rem; }
.sample-tag, .job-code { font: 650 .68rem/1.4 ui-monospace, monospace; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.job-board li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(.5rem, 2vw, 1rem); padding: .8rem; background: #22231e; border: 1px solid var(--line); border-radius: .55rem; }
.job-board li + li { margin-top: .55rem; }
.job-board small { display: block; color: var(--muted); }
.job-status { border-radius: .3rem; padding: .25rem .4rem; font-size: .72rem; font-weight: 750; }
.job-status.new { background: #443c1d; color: #ffe575; }
.job-status.booked { background: #293540; color: #c2dcf7; }
.job-status.complete { background: #26382a; color: #adebb7; }

.workflow { background: #191a17; border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 5rem); }
.workflow h2 { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.035em; margin-bottom: 2rem; }
.step { border-top: 1px solid #555447; padding-top: 1rem; }
.step-number { color: var(--accent); font: 700 .8rem/1 ui-monospace, monospace; }
.step h3 { font-size: 1.2rem; font-weight: 750; margin: .65rem 0 .5rem; }
.step p, .legal p, .legal li { color: var(--muted); }
.step p { max-width: 38ch; margin-bottom: 0; }

.legal { max-width: 800px; padding-block: clamp(3rem, 6vw, 5rem); }
.legal h1 { font-size: clamp(2.6rem, 7vw, 4.5rem); }
.legal h2 { font-weight: 750; font-size: 1.4rem; margin: 2rem 0 .75rem; }
.legal a, .site-footer [aria-current="page"] { color: var(--accent); }
.legal .draft { padding: .85rem 1rem; border-left: 3px solid var(--accent); background: #272619; }
