/* HiringLane website redesign - one stylesheet, design tokens first.
   Fall, but restrained: warm ivory and ink do the work, rust / olive / amber are accents.
   Every colour pair is checked by tools/contrast.py (WCAG 2.1 AA). Do not add a colour without a token. */

/* ---------- 1. Tokens ---------- */
:root, [data-theme="light"] {
  /* colour */
  --bg: #FBF7F0;            /* warm ivory page */
  --surface: #FFFFFF;       /* cards, inputs */
  --surface-2: #F5EEE0;     /* quiet sand panels */
  --sand: #EADFCB;
  --ink: #2B211C;
  --ink-muted: #6B5B4E;
  --line: #EADFCB;
  --border-strong: #8C7B6B; /* input borders: 3:1 UI contrast */
  --primary: #B5522B;       /* rust: buttons */
  --primary-hover: #9A4523;
  --on-primary: #FFFFFF;
  --link: #A64A25;
  --olive: #4F5D2F;
  --on-olive: #FFFFFF;
  --olive-text: #4F5D2F;
  --amber: #D99A2B;         /* icons, rules, badges - never text on white */
  --on-amber: #2B211C;
  --burgundy: #7A2E2E;      /* rare emphasis */
  --burgundy-text: #7A2E2E;
  --focus: #44768F;         /* a dusty blue-teal, softer than the old #1F5FA8 but still 3.7:1 or better on every warm surface (30 Oct 2026, the founder: subtle, in tune with the autumn tones) */
  --tint-rust: #F8E6DC;   --rust-ink: #8A3A1B;
  --tint-olive: #E9EDD8;  --olive-ink: #4F5D2F;
  --tint-amber: #FBEBC8;  --amber-ink: #6B4300;
  --tint-burgundy: #F3DEDD; --burgundy-ink: #7A2E2E;
  --hero-bg: #F6EEDF;     --hero-ink: #2B211C;
  --dark-band: #3B4524;   --on-dark-band: #FBF7F0; --on-dark-band-muted: #DCE2C5; --band-link: #F6CE8E;
  /* art (decorative only) */
  --art-rust: #B5522B; --art-amber: #D99A2B; --art-olive: #6F7F43; --art-sand: #EADFCB;
  /* shape and depth */
  --radius: 16px; --radius-sm: 10px; --radius-lg: 24px; --radius-pill: 999px;   /* softer curves: round 2 (was 12/8/20) */
  --shadow-1: 0 1px 2px rgba(43,33,28,.06), 0 2px 8px rgba(43,33,28,.05);
  --shadow-2: 0 4px 10px rgba(43,33,28,.07), 0 12px 32px rgba(43,33,28,.08);
  /* type */
  --font-head: "Fraunces", "Iowan Old Style", Georgia, "Noto Serif Devanagari", serif;
  --font-body: "Inter", "Mukta", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hindi: "Mukta", "Noto Sans Devanagari", "Nirmala UI", sans-serif;
  /* spacing (4px base) */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem; --s9: 6rem;
  --gutter: 16px; --maxw: 1180px; --header-h: 56px; --search-max: 720px; --assist-gutter: 0px;
  --sky-top: #FDF6EA; --sky-bottom: #F7E4C6;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1E1814; --surface: #2A221D; --surface-2: #342A24; --sand: #3D3129;
    --ink: #F3EBE1; --ink-muted: #C2B2A2; --line: #4A3C32; --border-strong: #8F7D6C;
    --primary: #E07A4E; --primary-hover: #EB8E66; --on-primary: #1E1814; --link: #EE9A73;
    --olive: #A3B270; --on-olive: #1E1814; --olive-text: #B7C585;
    --amber: #E3A93F; --on-amber: #1E1814; --burgundy: #E59A92; --burgundy-text: #EDB1AA;
    --focus: #8FB5C8;
    --tint-rust: #4A2A1D; --rust-ink: #F2B596; --tint-olive: #333A22; --olive-ink: #C5D191;
    --tint-amber: #4A3812; --amber-ink: #F0C777; --tint-burgundy: #4A2527; --burgundy-ink: #F0B1AB;
    --hero-bg: #261E19; --hero-ink: #F3EBE1; --sky-top: #211914; --sky-bottom: #33241B;
    --dark-band: #2B3419; --on-dark-band: #F3EBE1; --on-dark-band-muted: #CBD3B0; --band-link: #F2C98A;
    --art-rust: #E07A4E; --art-amber: #E3A93F; --art-olive: #A3B270; --art-sand: #3D3129;
    --shadow-1: 0 1px 2px rgba(0,0,0,.35); --shadow-2: 0 8px 28px rgba(0,0,0,.4);
    color-scheme: dark;
  }
}
[data-theme="dark"] {
  --bg: #1E1814; --surface: #2A221D; --surface-2: #342A24; --sand: #3D3129;
  --ink: #F3EBE1; --ink-muted: #C2B2A2; --line: #4A3C32; --border-strong: #8F7D6C;
  --primary: #E07A4E; --primary-hover: #EB8E66; --on-primary: #1E1814; --link: #EE9A73;
  --olive: #A3B270; --on-olive: #1E1814; --olive-text: #B7C585;
  --amber: #E3A93F; --on-amber: #1E1814; --burgundy: #E59A92; --burgundy-text: #EDB1AA;
  --focus: #8FB5C8;
  --tint-rust: #4A2A1D; --rust-ink: #F2B596; --tint-olive: #333A22; --olive-ink: #C5D191;
  --tint-amber: #4A3812; --amber-ink: #F0C777; --tint-burgundy: #4A2527; --burgundy-ink: #F0B1AB;
  --hero-bg: #261E19; --hero-ink: #F3EBE1; --sky-top: #211914; --sky-bottom: #33241B;
  --dark-band: #2B3419; --on-dark-band: #F3EBE1; --on-dark-band-muted: #CBD3B0; --band-link: #F2C98A;
  --art-rust: #E07A4E; --art-amber: #E3A93F; --art-olive: #A3B270; --art-sand: #3D3129;
  --shadow-1: 0 1px 2px rgba(0,0,0,.35); --shadow-2: 0 8px 28px rgba(0,0,0,.4);
  color-scheme: dark;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 1rem/1.6 var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 560; line-height: 1.18; letter-spacing: -.01em; margin: 0 0 var(--s3); color: var(--ink); text-wrap: balance; }
h1, .h1 { font-size: clamp(2rem, 1.2rem + 3.6vw, 3.4rem); letter-spacing: -.02em; }
.h1 { font-family: var(--font-head); font-weight: 560; line-height: 1.18; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.15rem); }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; font-family: var(--font-body); font-weight: 650; letter-spacing: 0; }
p { margin: 0 0 var(--s4); }
.lead { font-size: 1.125rem; color: var(--ink-muted); max-width: 60ch; }
.muted { color: var(--ink-muted); }
.small { font-size: .875rem; }
.eyebrow { font: 600 .78rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--olive-text); margin: 0 0 var(--s3); }
[lang="hi"], .hi { font-family: var(--font-hindi); line-height: 1.7; letter-spacing: 0; }
h1[lang="hi"], h2[lang="hi"], h3[lang="hi"] { font-family: var(--font-hindi); font-weight: 700; letter-spacing: 0; line-height: 1.35; }
/* Devanagari is never letter-spaced (founder's sister, 30 Oct 2026: "there is a gap in उम्मीदवार"). Cause, measured: the small label above
   a heading (.eyebrow) is tracked at .12em for Latin capitals; on a Hindi page that tracking was applied to Devanagari too, which pulls the
   vowel signs (matras) and the half-letters of a joined letter apart. Mukta itself is fine (the same word at 0 spacing is whole).
   So: on a Hindi page, and inside any lang="hi" island, spacing is 0 whatever a component asks for; .eyebrow--plain is for a label that
   mixes Hindi and English on an English page. tests/browser/test_devanagari.py scans every page in both languages. */
html[lang="hi"] *, [lang="hi"], [lang="hi"] *, .eyebrow--plain { letter-spacing: 0 !important; }
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--s8); }
.section--tight { padding-block: var(--s7); }
.section--sand { background: var(--surface-2); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s3) var(--s5); margin-bottom: var(--s6); }
.section-head h2 { margin: 0; }
.section-head p { margin: var(--s2) 0 0; color: var(--ink-muted); max-width: 56ch; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: var(--s3); top: -4rem; background: var(--ink); color: var(--bg); padding: var(--s2) var(--s4); border-radius: var(--radius-sm); z-index: 100; }
.skip-link:focus { top: var(--s3); }
.lane-rule { height: 6px; width: 72px; border-radius: 6px; margin: 0 0 var(--s4); background: linear-gradient(90deg, var(--art-rust) 0 40%, var(--art-amber) 40% 70%, var(--art-olive) 70%); }
@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 900px) { .section { padding-block: var(--s9); } }

/* ---------- 3. Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .6rem 1.15rem; font: 600 .95rem/1.2 var(--font-body);
  border-radius: var(--radius); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, transform .08s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); text-decoration: none; }
.btn-olive { background: var(--olive); color: var(--on-olive); }
.btn-olive:hover { filter: brightness(1.12); text-decoration: none; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-2); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--link); padding-inline: .6rem; }
.btn-ghost:hover { background: var(--surface-2); text-decoration: none; }
.btn-light { background: var(--on-dark-band); color: var(--dark-band); }
.btn-light:hover { filter: brightness(.95); text-decoration: none; }
.btn-sm { min-height: 44px; padding: .35rem .8rem; font-size: .85rem; border-radius: var(--radius-sm); }
.btn-lg { min-height: 52px; padding: .8rem 1.5rem; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 4. Forms ---------- */
.field { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.field > label, .legend { font-weight: 600; font-size: .9rem; color: var(--ink); }
.req { color: var(--burgundy-text); }
.input, .select, .textarea { width: 100%; min-height: 46px; padding: .6rem .85rem; font: inherit; color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--border-strong); border-radius: var(--radius); appearance: none; -webkit-appearance: none; }
/* ONE select (10 Nov 2026, the founder: "it looks stuck to the right side"). The words start at the field's own left padding (--sel-x, the .85rem of .input) and the chevron ends the same distance from the right edge, so both
   share one inner margin; no browser arrow; the chevron is two half strokes in currentColor (it follows the text colour, so a disabled or any future dark select needs nothing), 12px wide; the right padding leaves room for it
   (x + 12px + 8px) so a long label ends in an ellipsis and never runs under it. Height, corner and border are the field's. A pill select in the search bar sets --sel-x to the bar's own inset (below). The list that opens is the browser's. */
.select { --sel-x: .85rem; --sel-w: .6px; padding-inline: var(--sel-x) calc(var(--sel-x) + 12px + 8px); text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
  background-image: linear-gradient(to bottom left, transparent calc(50% - var(--sel-w) - .5px), currentColor calc(50% - var(--sel-w)) calc(50% + var(--sel-w)), transparent calc(50% + var(--sel-w) + .5px)), linear-gradient(to bottom right, transparent calc(50% - var(--sel-w) - .5px), currentColor calc(50% - var(--sel-w)) calc(50% + var(--sel-w)), transparent calc(50% + var(--sel-w) + .5px));
  background-repeat: no-repeat;
  background-size: 6px 6px, 6px 6px; background-position: right calc(var(--sel-x) + 6px) center, right var(--sel-x) center;
}
.select:disabled { cursor: default; }
.textarea { min-height: 130px; resize: vertical; }
.input::placeholder { color: var(--ink-muted); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-muted); }
.input:focus, .select:focus, .textarea:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.hint { font-size: .82rem; color: var(--ink-muted); margin: 0; }
.error-text { font-size: .85rem; color: var(--burgundy-text); font-weight: 600; margin: 0; }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--burgundy-text); border-width: 2px; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; cursor: pointer; padding-block: .25rem; }
.check input { width: 20px; height: 20px; margin: .1rem 0 0; accent-color: var(--primary); flex: none; }
.form-row { display: grid; gap: 0 var(--s4); }
@media (min-width: 640px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }

/* Search bar (home hero, jobs page, companies page): ONE slim row (founder, 29 Oct 2026: "much thinner"). No visible labels: each
   field keeps a real <label> (visually hidden), a title (hover shows the full prompt), a placeholder and a small leading icon. Inputs and
   buttons share one height (--sb-h) and everything is centred on the bar. Never wider than --search-max (720px). Phone: a compact
   stack, the button full width under the fields. Every placeholder must show IN FULL (founder, 29 Oct 22:00: "state" was cut): each
   field has a minimum width (--fit, set per bar below) = its longest English prompt + about 24px to spare + the icon and arrow room;
   Hindi is shorter everywhere. The datalist's own drop-arrow is hidden (it ate 20px of the text and the pin already says "place").
   tests/browser/test_home_hero.py measures the placeholder text against the field at every width in both languages. */
.search-bar { --sb-h: 44px; width: 100%; max-width: var(--search-max); display: flex; flex-direction: column; gap: var(--s2); background: var(--surface); padding: var(--s3); border-radius: var(--radius-lg); border: 1px solid var(--line); }
.search-bar .field { position: relative; display: block; margin: 0; min-width: 0; }
.search-bar .field > .icon { position: absolute; left: var(--s3); top: 50%; transform: translateY(-50%); color: var(--ink-muted); pointer-events: none; }
.search-bar .input, .search-bar .select { height: var(--sb-h); min-height: 0; padding-block: 0; padding-inline: calc(var(--s3) + 1.15em + var(--s1)) var(--s2); border-color: transparent; background-color: var(--surface-2); border-radius: var(--radius-pill); text-overflow: ellipsis; }
.search-bar .select { --sel-x: var(--s3); padding-inline: calc(var(--s3) + 1.15em + var(--s1)) calc(var(--s3) + 12px + 8px); }   /* the icon sits one --s3 in from the left, the chevron one --s3 in from the right */
.search-bar input::-webkit-calendar-picker-indicator { display: none !important; }
.search-bar .input:focus, .search-bar .select:focus { border-color: var(--focus); }
.search-bar .btn { height: var(--sb-h); min-height: 0; padding-block: 0; border-radius: var(--radius-pill); }
.search-bar--page { margin-inline: auto; }
@media (max-width: 359px) { .search-bar .input::placeholder { font-size: .85em; } }   /* a 320px phone: the longest prompt (jobs page) still shows in full */
@media (min-width: 760px) {
  .search-bar { --sb-h: 48px; flex-direction: row; align-items: center; gap: 0; padding: var(--s1); border-radius: var(--radius-pill); }
  .search-bar .field { flex: 1 1 var(--fit, 10rem); min-width: var(--fit, 10rem); }
  .search-bar .input, .search-bar .select { background-color: transparent; }
  .search-bar .input:hover, .search-bar .select:hover { background-color: var(--surface-2); border-color: transparent; }
  .search-bar .input:focus, .search-bar .select:focus { border-color: var(--focus); }
  .search-bar .field + .field::before { content: ""; position: absolute; left: 0; top: 25%; bottom: 25%; width: 1px; background: var(--line); }
  .search-bar .btn { flex: none; margin-left: var(--s2); padding-inline: var(--s5); }
  /* --fit per field: longest English prompt + 24px + icon/arrow room (13.7rem = "Job title or keyword" and so on) */
  .hero--home .search-bar .field:nth-child(1) { --fit: 13.7rem; } .hero--home .search-bar .field:nth-child(2) { --fit: 9.9rem; } .hero--home .search-bar .field:nth-child(3) { --fit: 12.7rem; }
  #top-search .field:nth-child(1) { --fit: 18.7rem; } #top-search .field:nth-child(2) { --fit: 9.9rem; }
  .search-bar--page .field:nth-child(1) { --fit: 12.1rem; } .search-bar--page .field:nth-child(2) { --fit: 9.9rem; } .search-bar--page .field:nth-child(3) { --fit: 11.4rem; }
}
.count-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.count-row .count-line { margin-bottom: var(--s4); }
.count-row .btn { margin-bottom: var(--s4); }
.count-line { margin-bottom: var(--s4); } .count-line:empty { margin: 0; }

/* ---------- 5. Badges, chips ---------- */
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .6rem; border-radius: var(--radius-pill); font-size: .76rem; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.badge--rust { background: var(--tint-rust); color: var(--rust-ink); }
.badge--olive { background: var(--tint-olive); color: var(--olive-ink); }
.badge--amber { background: var(--tint-amber); color: var(--amber-ink); }
.badge--burgundy { background: var(--tint-burgundy); color: var(--burgundy-ink); }
.badge--sand { background: var(--surface-2); color: var(--ink-muted); border: 1px solid var(--line); }
.chip { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .35rem .9rem; border-radius: var(--radius-pill); border: 1.5px solid var(--line);
  background: var(--surface); color: var(--ink); font-size: .9rem; font-weight: 500; text-decoration: none; cursor: pointer; font-family: inherit; }
.chip:hover { border-color: var(--border-strong); text-decoration: none; }
.chip[aria-pressed="true"], .chip[aria-current="true"] { background: var(--tint-rust); border-color: var(--primary); color: var(--rust-ink); font-weight: 600; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip .x { font-size: 1.1em; line-height: 1; }

/* ---------- 6. Header / nav ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.site-header .bar { display: flex; align-items: center; gap: var(--s3); min-height: 52px; padding-block: 4px; }
.brand { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--ink); font: 600 1.3rem/1 var(--font-head); letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
.brand svg { width: 30px; height: 30px; }
.brand b { font-weight: 560; color: var(--link); }
.nav { display: none; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .85rem; color: var(--ink); text-decoration: none; font-weight: 500; font-size: .95rem; border-radius: var(--radius-sm); }
.nav a:hover { background: var(--surface-2); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--link); font-weight: 650; box-shadow: inset 0 -3px 0 var(--amber); border-radius: 0; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: 1.5px solid transparent; border-radius: var(--radius); color: var(--ink); cursor: pointer; }
.icon-btn:hover { background: var(--surface-2); }
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: var(--s2); z-index: 60; }
.menu-panel a { display: block; padding: .6rem .8rem; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: .93rem; }
.menu-panel a:hover { background: var(--surface-2); text-decoration: none; }
.menu-panel small { display: block; color: var(--ink-muted); font-size: .78rem; }
.hide-sm { display: none; }
.site-header .btn-sm { min-height: 44px; padding-inline: 1rem; border-radius: var(--radius-pill); }
.mobile-nav { border-top: 1px solid var(--line); background: var(--bg); padding: var(--s3) var(--gutter) var(--s5); }
.mobile-nav[hidden] { display: none; }
.mobile-nav a { display: flex; align-items: center; min-height: 48px; color: var(--ink); text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--line); }
.mobile-nav a[aria-current="page"] { color: var(--link); font-weight: 650; }
.mobile-nav .btn { margin-top: var(--s3); border-bottom: 0; }
@media (min-width: 960px) { .site-header .bar { display: grid; grid-template-columns: 1fr auto 1fr; min-height: var(--header-h); } .header-actions { justify-self: end; } .nav { display: flex; gap: .15rem; } .hide-sm { display: inline-flex; } .nav-toggle, .mobile-nav { display: none !important; } }
.theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: block; } [data-theme="dark"] .theme-toggle .moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .sun { display: block; } :root:not([data-theme="light"]) .theme-toggle .moon { display: none; } }

/* ---------- 7. Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--hero-bg); color: var(--hero-ink); padding-block: var(--s7) var(--s8); }
.hero .container { position: relative; z-index: 1; }
.hero h1 { max-width: 16ch; }
.hero .lead { margin-bottom: var(--s5); }
.hero-quick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s4); font-size: .9rem; color: var(--ink-muted); }
.hero-trust { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s4); font-size: .9rem; color: var(--ink-muted); }
.hero-trust span { display: inline-flex; align-items: center; gap: .45rem; }
.hero-trust .icon { color: var(--olive-text); }
.hero-art { position: absolute; inset: 0 -4% 0 auto; width: 62%; height: 100%; opacity: .9; pointer-events: none; z-index: 0; overflow: visible; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 45%); mask-image: linear-gradient(to right, transparent 0, #000 45%); }
@media (max-width: 899px) { .hero-art { opacity: .5; width: 150%; } }
/* the buildings picture: her own image from the live site (assets/../img/hero-buildings.png, source in README). Sits at the foot of the hero;
   the text stays in the clear sky above and the hills get their own padding, so no text is ever over the orange hills. */
.hero--photo { --hills: clamp(92px, 9.5vw, 140px); background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 100%); padding-block: var(--s6) calc(var(--s5) + var(--hills)); }
.hero--photo::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("../img/hero-buildings.png") no-repeat center bottom / max(100%, 1000px) auto; }
:root[data-theme="dark"] .hero--photo::before { filter: brightness(.55) saturate(.8); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero--photo::before { filter: brightness(.55) saturate(.8); } }
.hero--photo .hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 760px; margin-inline: auto; }
.hero--photo h1 { max-width: 18ch; margin-bottom: var(--s3); font-size: clamp(2rem, 1.3rem + 3vw, 3.1rem); }
.hero--photo .eyebrow { margin-bottom: var(--s2); }
.hero--photo .lead { max-width: 54ch; margin-bottom: var(--s4); }
.hero--photo .hero-quick, .hero--photo .hero-trust { justify-content: center; }
.hero--photo .hero-quick { margin-top: var(--s3); }
.hero--left .container > * { text-align: left; }
.hero--left h1 { max-width: 14ch; }
@media (min-width: 900px) { .hero:not(.hero--photo) { padding-block: var(--s8) var(--s8); } .hero--photo { padding-top: var(--s7); } }
.page-hero { background: var(--hero-bg); padding-block: var(--s5) var(--s5); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.page-hero h1 { font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.4rem); margin-bottom: var(--s2); }
.page-hero .search-bar { margin-top: var(--s4); }
.page-hero .lead { margin-bottom: 0; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0 0 var(--s3); font-size: .85rem; color: var(--ink-muted); }
.breadcrumb li + li::before { content: "/"; margin-right: .4rem; color: var(--border-strong); }
.breadcrumb a { color: var(--ink-muted); }

/* ---------- 8. Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); box-shadow: var(--shadow-1); }
.grid { display: grid; gap: var(--s4); }
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.mono { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 12px; font: 600 1.15rem/1 var(--font-head); }
.mono--rust { background: var(--tint-rust); color: var(--rust-ink); }
.mono--olive { background: var(--tint-olive); color: var(--olive-ink); }
.mono--logo { object-fit: contain; background: #fff; border: 1px solid var(--line, #e5e1d8); padding: 3px; }
.mono--amber { background: var(--tint-amber); color: var(--amber-ink); }
.mono--burgundy { background: var(--tint-burgundy); color: var(--burgundy-ink); }
.mono--lg { width: 72px; height: 72px; font-size: 1.7rem; border-radius: 18px; }

.job-card { position: relative; display: flex; flex-direction: column; gap: var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4) var(--s4) var(--s3); box-shadow: var(--shadow-1); transition: border-color .15s, box-shadow .15s, transform .15s; }
.job-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.job-card:focus-within { border-color: var(--focus); }
.job-card__top { display: flex; gap: var(--s3); align-items: flex-start; }
.job-card__title { font: 650 1.05rem/1.3 var(--font-body); letter-spacing: 0; margin: 0 0 .15rem; }
.job-card__title a { color: var(--ink); text-decoration: none; }
.job-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); } /* whole card is the link */
.job-card__title a:hover { color: var(--link); text-decoration: underline; }
.job-card__company { color: var(--ink-muted); font-size: .9rem; margin: 0; }
.job-card__meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: 0; padding: 0; list-style: none; color: var(--ink-muted); font-size: .88rem; }
.job-card__meta li { display: inline-flex; align-items: center; gap: .35rem; }
.job-card__meta .icon { color: var(--olive-text); width: 1em; height: 1em; }
.job-card__salary { color: var(--ink); font-weight: 650; }
.job-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); border-top: 1px solid var(--line); padding-top: var(--s3); margin-top: auto; font-size: .82rem; color: var(--ink-muted); }
.job-card__foot .save { position: relative; z-index: 2; }
.job-list { display: grid; gap: var(--s3); }
.save { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-muted); cursor: pointer; }
.save:hover { background: var(--surface-2); color: var(--link); }
.save[aria-pressed="true"] { color: var(--link); } .save[aria-pressed="true"] svg { fill: currentColor; }
@media (min-width: 760px) { .job-list .job-card { flex-direction: row; align-items: center; gap: var(--s5); padding: var(--s4) var(--s5); }
  .job-list .job-card__body { flex: 1; min-width: 0; } .job-list .job-card__foot { border: 0; padding: 0; margin: 0; flex-direction: column; align-items: flex-end; min-width: 140px; } }

.company-card { position: relative; display: flex; gap: var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); box-shadow: var(--shadow-1); transition: border-color .15s, box-shadow .15s; }
.company-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.company-card h3 { margin: 0 0 .1rem; font: 650 1.05rem/1.3 var(--font-body); letter-spacing: 0; }
.company-card h3 a { color: var(--ink); text-decoration: none; }
.company-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.company-card p { margin: 0 0 .35rem; font-size: .86rem; color: var(--ink-muted); }

.cat-card { position: relative; display: flex; align-items: center; gap: var(--s3); padding: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: border-color .15s, background .15s; }
.cat-card:hover { border-color: var(--primary); background: var(--tint-rust); text-decoration: none; }
.cat-card .ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--tint-olive); color: var(--olive-ink); flex: none; }
.cat-card strong { display: block; font-size: .98rem; line-height: 1.25; }
.cat-card span { font-size: .82rem; color: var(--ink-muted); }

.step { position: relative; padding-top: var(--s2); }
.step .num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--tint-amber); color: var(--amber-ink); font: 600 1.25rem/1 var(--font-head); margin-bottom: var(--s3); }
.step h3 { margin-bottom: var(--s2); } .step p { color: var(--ink-muted); margin: 0; }
.feature .ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--tint-rust); color: var(--rust-ink); margin-bottom: var(--s3); }
.feature h3 { margin-bottom: var(--s2); } .feature p { margin: 0; color: var(--ink-muted); font-size: .95rem; }

.quote { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); }
.quote blockquote { margin: 0; }
.quote p { font-family: var(--font-head); font-size: 1.1rem; line-height: 1.5; margin-bottom: var(--s4); }
.quote figcaption { display: flex; align-items: center; gap: var(--s3); font-size: .88rem; color: var(--ink-muted); }
.quote figcaption b { display: block; color: var(--ink); font-weight: 650; }

.band { background: var(--dark-band); color: var(--on-dark-band); border-radius: var(--radius-lg); padding: var(--s6) var(--s5); position: relative; overflow: hidden; }
.band h2, .band h3 { color: var(--on-dark-band); } .band p { color: var(--on-dark-band-muted); }
.band a:not(.btn) { color: var(--band-link); }
.band :focus-visible { outline-color: var(--band-link); }
.band .btn-secondary { color: var(--on-dark-band); border-color: var(--on-dark-band-muted); } .band .btn-secondary:hover { background: rgba(255,255,255,.08); }
.band-grid { display: grid; gap: var(--s5); }
@media (min-width: 860px) { .band { padding: var(--s7) var(--s7); } .band-grid { grid-template-columns: 1fr 1fr; gap: var(--s7); } }
.band-split { display: grid; gap: var(--s4); }
@media (min-width: 860px) { .band-split { grid-template-columns: 1fr 1fr; } }
.audience-card { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-lg); padding: var(--s6) var(--s5); }
.audience-card ul { padding-left: 1.1rem; margin: 0 0 var(--s5); color: var(--ink-muted); } .audience-card li { margin-bottom: .35rem; } .audience-card li::marker { color: var(--amber); }

.checklist { list-style: none; padding: 0; margin: 0 0 var(--s5); display: grid; gap: var(--s3); }
.checklist li { display: flex; gap: .65rem; align-items: flex-start; }
.checklist .icon { color: var(--olive-text); margin-top: .2rem; }

/* Hindi section */
.hindi-block { display: grid; gap: var(--s5); align-items: center; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); padding: var(--s6) var(--s5); position: relative; overflow: hidden; }
.hindi-block h2 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.3rem); }
.hindi-block .lang-chips .chip { font-family: var(--font-hindi); }
@media (min-width: 860px) { .hindi-block { grid-template-columns: 1.3fr 1fr; padding: var(--s7); } }

/* FAQ */
.faq { display: grid; gap: var(--s3); max-width: 820px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.faq summary { cursor: pointer; list-style: none; padding: var(--s4) var(--s5) var(--s4) var(--s4); font-weight: 600; display: flex; justify-content: space-between; gap: var(--s4); align-items: center; min-height: 52px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 1.5rem/1 var(--font-body); color: var(--link); flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details[open] { border-color: var(--border-strong); }
.faq .answer { padding: 0 var(--s4) var(--s4); color: var(--ink-muted); } .faq .answer p:last-child { margin: 0; }

/* ---------- 9. Jobs page: filters + results ---------- */
.jobs-layout { display: grid; gap: var(--s5); padding-block: var(--s5) var(--s8); }
@media (min-width: 960px) { .jobs-layout { grid-template-columns: 300px 1fr; align-items: start; gap: var(--s6); } }
.filters { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.filters > summary { list-style: none; cursor: pointer; padding: var(--s3) var(--s4); font-weight: 650; display: flex; align-items: center; justify-content: space-between; min-height: 52px; }
.filters > summary::-webkit-details-marker { display: none; }
.filters-body { padding: 0 var(--s4) var(--s4); }
@media (min-width: 960px) { .filters { position: sticky; top: 72px; max-height: calc(100vh - 100px); overflow: auto; } .filters > summary { cursor: default; pointer-events: none; } .filters > summary .chev { display: none; } }
.filters fieldset { border: 0; padding: 0; margin: 0 0 var(--s4); }
.filters .more { border-top: 1px solid var(--line); padding-top: var(--s3); margin-top: var(--s2); }
.filters .more > summary { cursor: pointer; font-weight: 600; font-size: .9rem; min-height: 40px; display: flex; align-items: center; color: var(--link); }
.range-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.results-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.results-head h2 { font-size: 1.15rem; margin: 0; font-family: var(--font-body); font-weight: 650; }
.results-head .select { width: auto; min-width: 190px; min-height: 40px; }
.active-filters { margin-bottom: var(--s4); }
.empty { text-align: center; padding: var(--s7) var(--s5); background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius); }
.empty h3 { margin-bottom: var(--s2); }
/* Pager (every paginated list): quiet text links, no boxes. The hit area stays 44px; only the look is small. */
.pager { margin-top: var(--s6); }
.pagination { display: flex; align-items: center; justify-content: center; gap: 0 .15rem; list-style: none; margin: 0; padding: 0; font-size: .92rem; color: var(--ink-muted); }
.pagination li { display: flex; }
.pagination a, .pagination span, .pagination .pg-gap { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 .5rem; border-radius: var(--radius-sm); color: var(--ink-muted); text-decoration: none; font-weight: 500; }
.pagination a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.pagination [aria-current="page"] { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--primary); border-radius: 0; }
.pagination [aria-disabled="true"] { opacity: .45; }
.pagination .pg-gap { min-width: 1.6rem; padding: 0; }
.pagination .pg-prev a, .pagination .pg-prev span, .pagination .pg-next a, .pagination .pg-next span { gap: .25rem; padding: 0 .6rem; color: var(--link); }
.pagination .pg-prev [aria-disabled], .pagination .pg-next [aria-disabled] { color: var(--ink-muted); }
.pagination .icon { width: 1em; height: 1em; }
.pagination .pg-status { display: none; padding: 0 .5rem; align-items: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 639px) { .pagination .pg-num { display: none; } .pagination .pg-status { display: flex; } .pagination { gap: 0 .5rem; } }

/* ---------- 10. Job / company detail ---------- */
.detail-head { display: flex; gap: var(--s4); align-items: flex-start; }
.detail-head h1 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); margin-bottom: var(--s2); }
.detail-meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: var(--s3) 0 var(--s4); padding: 0; list-style: none; color: var(--ink-muted); }
.detail-meta li { display: inline-flex; align-items: center; gap: .4rem; } .detail-meta .icon { color: var(--olive-text); }
.detail-meta .pay { color: var(--ink); font-weight: 650; }
.detail-layout { display: grid; gap: var(--s5); padding-block: var(--s6) var(--s8); }
@media (min-width: 960px) { .detail-layout { grid-template-columns: 1fr 340px; gap: var(--s6); align-items: start; } .side { position: sticky; top: 72px; } }
.prose h2 { font-size: 1.3rem; margin-top: var(--s6); } .prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.2rem; } .prose li { margin-bottom: .4rem; } .prose li::marker { color: var(--amber); }
.overview { display: grid; grid-template-columns: auto 1fr; gap: .6rem var(--s4); margin: 0; font-size: .93rem; }
.overview dt { color: var(--ink-muted); } .overview dd { margin: 0; font-weight: 600; text-align: right; }
.apply-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: var(--s2); padding: var(--s3) calc(var(--gutter) + var(--assist-gutter)) var(--s3) var(--gutter); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(43,33,28,.08); } /* the right gutter grows by --assist-gutter only when the widget runs (html[data-assist="on"]) */
.apply-bar .btn { flex: 1; }
@media (min-width: 960px) { .apply-bar { display: none; } }
body.has-apply-bar { padding-bottom: 84px; } @media (min-width: 960px) { body.has-apply-bar { padding-bottom: 0; } }
.share { display: flex; flex-wrap: wrap; gap: var(--s2); }
.tag-list { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; padding: 0; margin: 0; }
.notice { background: var(--tint-amber); color: var(--amber-ink); border-radius: var(--radius); padding: var(--s3) var(--s4); font-size: .9rem; }

/* ---------- 11. Footer ---------- */
.newsletter { background: var(--surface-2); border-top: 1px solid var(--line); padding-block: var(--s6); }
.newsletter .inner { display: grid; gap: var(--s4); align-items: center; }
.newsletter form { display: flex; flex-wrap: wrap; gap: var(--s2); }
.newsletter .field { margin: 0; flex: 1 1 240px; }
@media (min-width: 860px) { .newsletter .inner { grid-template-columns: 1fr 1fr; } }
.site-footer { background: var(--dark-band); color: var(--on-dark-band-muted); padding-block: var(--s7) var(--s5); font-size: .93rem; }
.site-footer a { color: var(--on-dark-band); text-decoration: none; } .site-footer a:hover { text-decoration: underline; }
.site-footer :focus-visible { outline-color: var(--band-link); }
.site-footer h4 { color: var(--on-dark-band); font-family: var(--font-body); margin-bottom: var(--s3); }
.site-footer .brand { color: var(--on-dark-band); } .site-footer .brand b { color: var(--band-link); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; } .site-footer li a { display: inline-flex; min-height: 44px; align-items: center; }
.footer-grid { display: grid; gap: var(--s6); grid-template-columns: 1fr 1fr; }
@media (max-width: 359px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } .footer-grid > * { min-width: 0; } .site-footer li a { overflow-wrap: anywhere; } }   /* a 320px phone: one column, so the e-mail address fits and the page does not scroll sideways */
.footer-grid > :first-child { grid-column: 1 / -1; }
@media (min-width: 860px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; } .footer-grid > :first-child { grid-column: auto; } }
.proto-note { display: block; opacity: .85; font-size: .8rem; margin-top: .2rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.16); margin-top: var(--s6); padding-top: var(--s4); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); font-size: .85rem; }
html[data-assist="on"] { --assist-gutter: 68px; }
/* ASSIST SLOT: the script sits just before </body>; it brings its own Shadow-DOM styles. Nothing here depends on it. */

/* ---------- 12. Design-system page ---------- */
.ds-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.swatch { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); font-size: .78rem; }
.swatch i { display: block; height: 56px; border-bottom: 1px solid var(--line); }
.swatch span { display: block; padding: .5rem .6rem; line-height: 1.35; } .swatch b { display: block; font-size: .82rem; }
.theme-panel { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s5); }
.ds-split { display: grid; gap: var(--s5); } @media (min-width: 960px) { .ds-split { grid-template-columns: 1fr 1fr; } }
.type-row { display: grid; gap: .25rem; padding-block: var(--s3); border-bottom: 1px solid var(--line); } .type-row code { font-size: .78rem; color: var(--ink-muted); }
code, kbd { font: .86em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--surface-2); padding: .1em .35em; border-radius: 5px; }
table.ds { border-collapse: collapse; width: 100%; font-size: .88rem; } table.ds th, table.ds td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.stack > * + * { margin-top: var(--s4); } .row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: .6rem 1rem; border-radius: var(--radius); font-size: .9rem; z-index: 90; }
.toast[hidden] { display: none; }
@media print { .site-header, .site-footer, .newsletter, .apply-bar, .proto-banner { display: none; } }
@media (max-width: 639px) { .hero-quick { flex-direction: column; align-items: flex-start; } .hero-quick .chip-row { flex-wrap: nowrap; overflow-x: auto; width: calc(100% + var(--gutter)); padding-bottom: 6px; margin-right: calc(-1 * var(--gutter)); } .hero-quick .chip { flex: none; } }
.job-card__foot > span { display: inline-flex; align-items: center; gap: .35rem; }
legend { padding: 0; }
.prose .tag-list { padding-left: 0; } .prose .tag-list li { margin: 0; }

/* ---------- 13. Round 2: thin sliders, thin scrollbars, alignment ---------- */
/* Range sliders: a 3px track and a 16px dot, but a 44px touch/hit area (the thumb is 44px with the dot painted in its middle). */
.range-field { margin-bottom: var(--s4); }
.range-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.range-head .legend { font-weight: 600; font-size: .9rem; }
.range-out { font-size: .85rem; font-weight: 600; color: var(--link); text-align: right; }
.range { position: relative; height: 44px; margin-inline: -14px; --lo: 0%; --hi: 100%; }
.range__track { position: absolute; left: 22px; right: 22px; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--border-strong); opacity: .55; }
.range__fill { position: absolute; top: 0; bottom: 0; left: var(--lo); width: calc(var(--hi) - var(--lo)); background: color-mix(in srgb, var(--primary) 65%, var(--surface)); border-radius: 2px; }
.range__track { opacity: 1; background: color-mix(in srgb, var(--border-strong) 40%, var(--surface)); }
.range input[type="range"] { position: absolute; inset: 0; width: 100%; height: 44px; margin: 0; padding: 0; background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none; }
.range input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: transparent; border: 0; }
.range input[type="range"]::-moz-range-track { height: 2px; background: transparent; border: 0; }
.range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; cursor: grab; width: 44px; height: 44px; margin-top: -21px; border: 0; border-radius: 50%;
  background: radial-gradient(circle, var(--primary) 0 5.5px, var(--surface) 5.5px 7px, transparent 7.5px); }
.range input[type="range"]::-moz-range-thumb { pointer-events: auto; cursor: grab; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: radial-gradient(circle, var(--primary) 0 5.5px, var(--surface) 5.5px 7px, transparent 7.5px); }
.range input[type="range"]:focus { outline: none; }
.range input[type="range"]:focus-visible::-webkit-slider-thumb { background: radial-gradient(circle, var(--primary) 0 5.5px, var(--surface) 5.5px 7px, var(--focus) 7px 10px, transparent 10.5px); }
.range input[type="range"]:focus-visible::-moz-range-thumb { background: radial-gradient(circle, var(--primary) 0 5.5px, var(--surface) 5.5px 7px, var(--focus) 7px 10px, transparent 10.5px); }
.range-ends { display: flex; justify-content: space-between; font-size: .75rem; color: var(--ink-muted); margin-top: -.35rem; }
/* Round 3 (founder, 29 Oct: "thinner, not in our face"): a 2px hairline, a softened fill and a 12px dot; the 44px hit area stays. Values live in the rules above, once. */
.range-head .legend, .range-out { font-weight: 500; }
/* any sideways scroller (carousel-like rows) gets a thin, quiet bar; nothing auto-advances */
.scroll-x, .hero-quick .chip-row { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.scroll-x::-webkit-scrollbar, .hero-quick .chip-row::-webkit-scrollbar { height: 4px; }
.scroll-x::-webkit-scrollbar-thumb, .hero-quick .chip-row::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
/* alignment: cards in a row share one height, the foot sits on one line */
.grid > .job-card, .grid > .company-card, .grid > .cat-card, .grid > .card { height: 100%; }
.job-card__body { display: flex; flex-direction: column; flex: 1; }
.job-card .chip-row { margin-top: auto !important; padding-top: var(--s3); }
.badge { border-radius: var(--radius-pill); }
.mono { border-radius: 14px; }
.section-head { align-items: end; }
.section-head > a.btn { flex: none; }

/* JD assistant slot (post-job page): the fallback tips fill the card until the widget mounts; the widget sets data-assist-mounted="true" */
.jd-slot { min-height: 120px; }
[data-assist-slot][data-assist-mounted="true"] .jd-slot__fallback { display: none; }

/* ---------- 14. Round 2 polish (the ui-ux critic's ten) ---------- */
/* 1 hero: children never wider than the column (phone fix); chips on one tidy row; roomier search keyword */
.hero--photo .hero-inner { width: 100%; max-width: 800px; }
.hero--photo .hero-inner > * { min-width: 0; max-width: 100%; }
.hero--photo .search-bar { text-align: left; }
.hero--photo .hero-quick { width: 100%; }
.hero--photo .hero-quick .chip { min-height: 44px; padding: .3rem .85rem; font-size: .86rem; box-shadow: var(--shadow-1); }
@media (max-width: 639px) { .hero--photo .hero-quick { align-items: stretch; } .hero--photo .hero-quick .chip-row { width: 100%; margin-right: 0; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; } .hero--photo .hero-quick > span:first-child { text-align: center; } }
/* 2 restrained motion: the hero settles in once (under 0.6s); nothing loops, nothing auto-advances */
@keyframes hl-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hero--photo .hero-inner > * { animation: hl-rise .55s cubic-bezier(.2,.7,.2,1) both; }
.hero--photo .hero-inner > :nth-child(2) { animation-delay: .05s; } .hero--photo .hero-inner > :nth-child(3) { animation-delay: .1s; } .hero--photo .hero-inner > :nth-child(4) { animation-delay: .15s; } .hero--photo .hero-inner > :nth-child(n+5) { animation-delay: .2s; }
/* 3 loading states: calm placeholder cards until the list arrives (also what a slow connection sees) */
@keyframes hl-shimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.skeleton { min-height: 168px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%) 0 0 / 240% 100%; animation: hl-shimmer 1.6s linear infinite; }
/* 4 rhythm: less empty air between sections */
.section { padding-block: var(--s7); } @media (min-width: 900px) { .section { padding-block: 5rem; } }
.section-head { margin-bottom: var(--s5); } .section-head h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
/* 5 cards: a quiet arrow and a title that warms on hover */
.job-card { border-radius: var(--radius); }
.job-card:hover .job-card__title a { color: var(--link); }
.job-card__foot { font-size: .84rem; }
.job-list .job-card__salary { background: var(--surface-2); padding: .15rem .6rem; border-radius: var(--radius-pill); }
.cat-card .ic { transition: transform .2s; } .cat-card:hover .ic { transform: scale(1.06); }
.cat-card, .company-card, .job-card, .btn { will-change: auto; }
/* 7 empty state with an icon */
.empty { border-radius: var(--radius-lg); }
.empty::before { content: ""; display: block; width: 56px; height: 56px; margin: 0 auto var(--s4); border-radius: 50%; background: var(--tint-amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B4300' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E") center / 26px no-repeat; }
/* 8 header: a hairline shadow only once the page has moved */
.site-header { transition: box-shadow .2s; } .site-header.is-scrolled { box-shadow: 0 6px 20px -12px rgba(43,33,28,.35); }
/* 9 type: calmer measure and weights */
.lead { line-height: 1.55; } h1, h2 { text-wrap: balance; } p { text-wrap: pretty; }
.audience-card h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); }
/* 10 footer and bands: rounder, lighter */
.band, .audience-card, .hindi-block { border-radius: var(--radius-lg); }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } .hero--photo .hero-inner > * { animation: none; } }
/* alignment fixes from the walk: fields keep their natural height when a neighbour has a hint; the left-aligned hero flips the picture so a leaf never crosses the headline */
.field { align-content: start; }
@media (min-width: 900px) { .hero--left::before { transform: scaleX(-1); } }

/* ---------- 15. Home alignment pass (founder, 28 Oct 2026) ----------
   One content width and one left edge for every block; a section title and its button on one line; a centred hero;
   grids that end evenly; the same air above and below every section. Checked in the browser by tests/browser/test_home_alignment.py
   (real site) and tools/align.py (prototype): edges 1px, title/button 2px, hero centres 2px, no orphan on the last row. */

/* section head: the title block (rule, h2, line of text) in one column, the button in the title's row, centred on the title */
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s5); row-gap: 0; }
.section-head > div { display: contents; }
.section-head > div > .lane-rule { grid-column: 1; grid-row: 1; }
.section-head > div > h2 { grid-column: 1; grid-row: 2; }
.section-head > div > p { grid-column: 1; grid-row: 3; }
.section-head > a { grid-column: 2; grid-row: 2; align-self: center; justify-self: end; }
.section-head > a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 559px) { .section-head { grid-template-columns: minmax(0, 1fr); } .section-head > a { grid-column: 1; grid-row: 4; justify-self: start; margin-top: var(--s3); } }

/* hero: everything on the centre line, at every width */
.hero--photo .hero-copy { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
.hero--photo .hero-copy > * { min-width: 0; max-width: 100%; }
.hero--photo .hero-copy > .search-bar { margin-inline: auto; max-width: var(--search-max); }
.hero--photo .hero-quick { justify-content: center; text-align: center; }
.hero--photo .hero-quick .chip-row { justify-content: center; }
@media (max-width: 639px) {
  .hero--photo .hero-quick { flex-direction: column; align-items: center; gap: var(--s2); }
  .hero--photo .hero-quick .chip-row { width: 100%; margin-right: 0; justify-content: safe center; flex-wrap: nowrap; overflow-x: auto; }
}

/* the steps always sit three across once there is room, never two and one */
.grid--steps { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid--steps { grid-template-columns: repeat(3, 1fr); } }

/* any two-column stage of a grid with an odd count ends on a full-width card, never a lone half-card */
@media (min-width: 640px) and (max-width: 959px) { .grid--3:not(.grid--steps) > :last-child:nth-child(odd), .grid--4 > :last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* a grid whose count changes (departments, latest jobs, hiring companies): the server picks the columns so the last row is full or
   nearly, and whatever is left over sits in the middle of the row */
.grid--fit { display: flex; flex-wrap: wrap; justify-content: center; --c: 1; }
.grid--fit > * { flex: 0 0 calc((100% - (var(--c) - 1) * var(--s4)) / var(--c)); min-width: 0; height: auto; }
.grid--fit { align-items: stretch; }
.grid--fit > .job-card, .grid--fit > .company-card, .grid--fit > .cat-card, .grid--fit > .card { height: auto; }
@media (min-width: 640px) { .fit-md-2 { --c: 2; } .fit-md-3 { --c: 3; } .fit-md-4 { --c: 4; } }
@media (min-width: 1100px) { .fit-lg-3 { --c: 3; } .fit-lg-4 { --c: 4; } .fit-lg-5 { --c: 5; } }

/* the same air above and below every section; background bands alternate; the FAQ takes the full width like everything else */
main > .section { padding-block: var(--s7); }
@media (min-width: 900px) { main > .section { padding-block: 5rem; } }
.faq { max-width: none; }
.newsletter { background: var(--bg); }
.job-card__title, .company-card h3, .cat-card strong { overflow-wrap: anywhere; }

/* names are never broken inside a word; the department card gives the name its room (smaller icon, tighter padding) and the server keeps it to 4 columns */
.cat-card strong, .cat-card span, .job-card__title, .company-card h3, .company-card p, .feature h3, .step h3 { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.cat-card { padding: var(--s3) var(--s4); gap: .75rem; }
.cat-card .ic { width: 40px; height: 40px; }
.cat-card > span:last-child { min-width: 0; }
.cat-card strong { font-size: .95rem; }

/* the real HiringLane logo (assets/LOGO-SOURCE.txt). Two files: dark lettering for the light page, white lettering for the dark page and the footer.
   The made-up striped mark is gone; the small accent above a section title is one plain colour and no longer looks like a logo. */
.brand { display: inline-flex; align-items: center; }
.brand-logo { display: block; height: 34px; width: auto; }
.brand-logo--on-dark { display: none; }
:root[data-theme="dark"] .brand-logo--on-light { display: none; } :root[data-theme="dark"] .brand-logo--on-dark { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-logo--on-light { display: none; } :root:not([data-theme="light"]) .brand-logo--on-dark { display: block; } }
.lane-rule { height: 4px; width: 40px; border-radius: 4px; margin: 0 0 var(--s4); background: var(--amber); }
.site-footer .brand-logo { height: 36px; }

/* ---------- 16. Search pages, quieter and centred (founder, 29 Oct 2026) ----------
   Jobs and Companies: the title, the line under it and the search bar sit on the page's centre line at a comfortable width (the
   breadcrumb and everything below keep the container's left edge, so the filters and the results still share one grid). The bar loses its
   shadow and its loud button; the button keeps 4.5:1 text on its tint (tools/contrast check in tests/browser/test_search_page.py). */
.page-hero--center { text-align: center; }
.page-hero--center .breadcrumb, .page-hero--center nav { text-align: left; }
.page-hero--center .lead { margin-inline: auto; max-width: 52ch; }
.page-hero--center .search-bar { margin-inline: auto; text-align: left; }
.page-hero .search-bar, .search-bar--page { border: 1px solid color-mix(in srgb, var(--border-strong) 35%, var(--line)); }
.page-hero .search-bar .btn.btn-primary, .search-bar--page .btn.btn-primary { background: var(--tint-rust); color: var(--rust-ink); box-shadow: none; }
.page-hero .search-bar .btn.btn-primary:hover, .search-bar--page .btn.btn-primary:hover { background: color-mix(in srgb, var(--tint-rust) 80%, var(--primary)); color: var(--rust-ink); }
.jobs-layout .filters { box-shadow: none; border-color: var(--line); }

/* ---------- 16b. Design 2.0, subtle: Jobs, Companies and Contact (founder's sister, 30 Oct 2026) ----------
   The About page's character, in a quiet form: the warm hero tone, the three-colour rule (rust / amber / olive), amber for pay, sand panels,
   warm hover and focus on cards. Nothing here changes a height above the search bar or the first result: the hero keeps its padding (the
   rule sits ON its bottom edge, the warmth is a gradient), the heading marks are inline. Colours are tokens only; every pair is measured in
   tests/browser/test_design2.py (WCAG 2.1 AA, light and dark). Scoped by each page's own data-hl so the other pages keep their look. */
:is([data-hl="jobs-page"], [data-hl="companies-page"], [data-hl="contact-page"]) > .page-hero {
  background: linear-gradient(180deg, var(--hero-bg) 0%, color-mix(in srgb, var(--hero-bg) 50%, var(--sky-bottom)) 100%); }
:is([data-hl="jobs-page"], [data-hl="companies-page"], [data-hl="contact-page"]) > .page-hero > .container { position: relative; }
:is([data-hl="jobs-page"], [data-hl="companies-page"], [data-hl="contact-page"]) > .page-hero > .container::after {
  content: ""; position: absolute; left: var(--gutter); bottom: calc(-1 * var(--s5)); width: 72px; height: 4px; border-radius: 4px 4px 0 0;
  background: linear-gradient(90deg, var(--art-rust) 0 40%, var(--art-amber) 40% 70%, var(--art-olive) 70%); }
:is([data-hl="jobs-page"], [data-hl="companies-page"]) > .page-hero--center > .container::after { left: 50%; margin-left: -36px; }
/* a small three-colour mark before the results heading and the companies count (inline: no height) */
.results-head h2, .count-row .count-line:not(:empty) { display: flex; align-items: center; gap: .6rem; }
.results-head h2 { font-family: var(--font-head); font-weight: 560; font-size: 1.3rem; letter-spacing: -.005em; }
.results-head h2::before, .count-row .count-line:not(:empty)::before { content: ""; flex: none; width: 4px; height: 1.15em; border-radius: 4px;
  background: linear-gradient(180deg, var(--art-rust) 0 40%, var(--art-amber) 40% 70%, var(--art-olive) 70%); }
.count-row .count-line { color: var(--ink); font-weight: 600; }
/* filters: a sand header (the panel reads as one warm object), a little air above the first field */
.jobs-layout .filters > summary { background: var(--surface-2); border-radius: var(--radius); font-family: var(--font-head); font-weight: 560; font-size: 1.05rem; }
.jobs-layout .filters[open] > summary { border-radius: var(--radius) var(--radius) 0 0; border-bottom: 1px solid var(--line); }
.jobs-layout .filters-body { padding-top: var(--s4); }
html[lang="hi"] .jobs-layout .filters > summary { font-family: var(--font-hindi); font-weight: 700; }
/* cards: a calm lift on hover - a soft shadow, a faint rust outline and the job title in rust (no edge stripe: on a rounded card it curved
   into a sliver; founder, 4 Nov 2026); a ring around the whole card for keyboard focus; pay in an amber pill */
.job-card, .company-card { transition: border-color .15s, box-shadow .15s, transform .12s; }
.job-card:hover, .company-card:hover { border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); box-shadow: var(--shadow-2); }
.job-card:hover .job-card__title a { color: var(--link); }
.job-list { gap: var(--s4); }
.job-card__meta .icon { color: var(--olive-text); }
.job-list .job-card__salary, .job-card__salary { background: var(--tint-amber); color: var(--amber-ink); padding: .15rem .65rem; border-radius: var(--radius-pill); font-weight: 650; }
.job-card__salary .icon { color: var(--amber-ink); }
@supports selector(:has(*)) {
  .job-card:has(.job-card__title a:focus-visible), .company-card:has(h3 a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--focus); }
  .job-card__title a:focus-visible, .company-card h3 a:focus-visible { outline: none; }
}
/* the pager: set off from the list by a hairline and more room */
.pager { margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid var(--line); }
/* a considered empty state: solid warm panel, the three-colour rule, a calmer measure */
.empty { border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%); padding-block: var(--s7); }
.empty h3 { font-size: 1.3rem; }
.empty p { max-width: 44ch; margin-inline: auto; }
.empty .row { margin-top: var(--s4); }
/* Contact: the form card and the side cards in the same warm family */
[data-section="contact-form"] .card { border-top: 3px solid var(--art-amber); }
.contact-intro { margin: 0 0 var(--s5); color: var(--ink-muted); max-width: 52ch; }
.contact-side .card { box-shadow: none; }
.contact-side .contact-mail { font-size: 1.05rem; font-weight: 600; overflow-wrap: anywhere; }
.contact-side .card--sand { background: var(--surface-2); border-left: 3px solid var(--art-amber); }
.contact-side .checklist { margin: 0; }
.contact-side h2 { font-size: 1.1rem; }

/* ---------- 17. About page: two columns, a side panel, a hero band, both audiences side by side (founder, 29 Oct 2026) ---------- */
.hero--about { padding-block: var(--s5) calc(var(--s4) + var(--hills)); }
.hero--about .hero-crumb { align-self: stretch; text-align: left; margin-bottom: var(--s4); }
.hero--about .hero-inner { max-width: 820px; }
.hero--about h1 { max-width: 22ch; }
.about-split { display: grid; gap: var(--s6); align-items: start; }
.about-prose p { max-width: 64ch; }
.about-prose p + p { margin-top: var(--s3); }
.about-glance { box-shadow: none; }
.about-glance .checklist { margin-bottom: var(--s4); }
.about-audiences { display: grid; gap: var(--s5); margin-top: var(--s5); }
.about-audiences .audience-card { display: flex; flex-direction: column; }
.about-audiences .audience-card h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); }
.about-audiences .audience-card ul { margin-bottom: var(--s4); }
.about-steps { list-style: none; margin: 0 0 var(--s5); padding: var(--s4) 0 0; border-top: 1px solid var(--line); display: grid; gap: var(--s2); color: var(--ink); font-weight: 600; font-size: .95rem; }
.about-steps li { display: flex; align-items: center; gap: .65rem; }
.about-steps .num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tint-amber); color: var(--amber-ink); font: 600 .85rem/1 var(--font-head); flex: none; }
.about-audiences .audience-card .row { margin-top: auto; }
.about-vision { padding: var(--s6) var(--s5); }
.about-vision h2 { margin-bottom: var(--s3); }
.about-vision p + p { margin-top: var(--s4); }
@media (min-width: 900px) {
  .about-split { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--s8); }
  .about-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: var(--s7); }
  .about-split--faq { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s7); }
  .about-split--faq .about-prose { position: sticky; top: calc(var(--header-h) + var(--s5)); }
  .about-audiences { grid-template-columns: 1fr 1fr; }
  .about-glance { position: sticky; top: calc(var(--header-h) + var(--s5)); }
  .about-vision { padding: var(--s7) var(--s6); display: flex; flex-direction: column; justify-content: center; }
}

/* ---------- 18. Home hero: room to breathe (founder, 29 Oct 2026) ----------
   Scoped to the home hero (.hero--home) so the About hero keeps its own spacing. Every gap is a spacing token; the bottom padding
   (the hills) is untouched, so no text sits over the picture. The search bar itself is section 4's slim row. tests/browser/test_home_hero.py. */
.hero--home { padding-top: var(--s7); }
.hero--home .eyebrow { margin-bottom: var(--s3); }
.hero--home h1 { margin-bottom: var(--s5); }
.hero--home .hero-quick { margin-top: var(--s5); }
.hero--home .hero-trust { margin-top: var(--s5); }
.hero--home .search-bar { box-shadow: var(--shadow-1); }
@media (min-width: 900px) and (min-height: 860px) { .hero--home { padding-top: var(--s8); } }   /* the extra top air only where the screen is tall enough to keep the first jobs in view */