/* Nokime Jobs — le passe bleu. The board is the steel band of a kitchen pass, and on it every offer is a plain
   white card, read like a list in one pass. Around the board, the page is the poster's white paper: black ink,
   one blue, hairlines, a lot of air. Two faces: Bricolage Grotesque speaks (the headline at 800, and every word
   of an offer), DM Mono labels (the eyebrows, the count, the form's section labels).
   Radius by role: cards are softened at 12px, controls are round like the balls of the rail. Nothing moves on load.
   Light only. Every colour goes through a token on :root; ratios are computed (WCAG 2). */

:root{
  --paper:#FFFFFF;      /* ground of the page, the cards */
  --ink:#17191E;        /* text, the rail's outline (17.6:1 on paper, 14.6:1 on steel) */
  --ink-2:#5A606B;      /* secondary text, the fact labels (6.3:1 on paper, 5.2:1 on steel) */
  --ink-3:#6E7480;      /* control borders, the kind's pill, placeholders, the empty distinction ring (4.7:1 on paper, 3.9:1 on steel; never text on steel) */
  --line:#D9DDE2;       /* hairlines between sections and blocks, the border of a card */
  --steel:#E7EAED;      /* the pass: ground of the board and of the posting form */
  --bleu:#2038D5;       /* the one colour (8.1:1 on paper, 6.7:1 on steel): promise, primary action, pressed filter, current page, distinction, focus */
  --on-bleu:#FFFFFF;    /* text on the blue (8.1:1) */
  --shadow:23,25,30;    /* rgb of the ink, for the phone menu's shadow */
  --sans:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;font-weight:400;font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
html[lang="en"] [data-lang="fr"],html[lang="fr"] [data-lang="en"]{display:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2.5px solid var(--bleu);outline-offset:3px;border-radius:2px}
img,svg{display:block;max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
p{margin:0 0 1em}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.02em;overflow-wrap:break-word;text-wrap:balance}
.muted{color:var(--ink-2)}
.small{font-size:14px;color:var(--ink-2)}

/* the registers: the poster's voice, condensed and heavy, for the two titles */
.headline{font-size:clamp(42px,6.6vw,96px);line-height:.95;letter-spacing:-.02em;font-weight:800;font-stretch:85%;margin:0}
.headline em{font-style:normal;color:var(--bleu)}
.display{font-size:clamp(40px,6vw,88px);line-height:.95;letter-spacing:-.02em;font-weight:800;font-stretch:85%;margin:0}
.kicker{font-size:clamp(28px,3.2vw,42px);line-height:1.02;letter-spacing:-.02em;font-weight:700;font-stretch:88%;margin:0}
h3{font-size:22px;line-height:1.15;font-stretch:90%;letter-spacing:-.012em}
.lead{font-size:clamp(19px,1.9vw,22px);line-height:1.42;font-weight:450;letter-spacing:-.008em;max-width:36ch;margin:0}
.eyebrow,.f-label{font-family:var(--mono);font-size:12px;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;font-weight:500;margin:0}
.eyebrow{color:var(--ink-2)}

/* ---------- buttons, links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:50px;padding:13px 22px;border:1.5px solid var(--ink);
  border-radius:999px;background:var(--paper);color:var(--ink);font:inherit;font-size:16px;font-weight:600;line-height:1.2;letter-spacing:-.005em;
  cursor:pointer;text-align:left}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.primary{background:var(--bleu);border-color:var(--bleu);color:var(--on-bleu)}
.btn.primary:hover{background:var(--ink);border-color:var(--ink)}
.btn.small{min-height:38px;padding:8px 16px;font-size:14px}
.btn .arrow{display:inline-block}
.link{font-weight:500;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:var(--ink-3)}
.link:hover{text-decoration-color:var(--ink)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* explanations fold behind a round plus */
.more{margin:14px 0 0;max-width:62ch}
.more summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;padding:4px 0;border-radius:4px}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"+";display:inline-grid;place-items:center;width:20px;height:20px;border:1.5px solid var(--ink);border-radius:50%;
  font-family:var(--mono);font-size:12px;font-weight:500;line-height:1;flex:none}
.more[open] > summary::before{content:"−"}
.more summary:hover::before{background:var(--ink);color:var(--paper)}
.more > :not(summary){margin-top:10px}
.more p{color:var(--ink-2);font-size:16px;margin:0 0 .8em}
.more p:last-child{margin-bottom:0}

/* ---------- masthead ---------- */
.site-head{background:var(--paper);border-bottom:1px solid var(--line);position:relative;z-index:30}
.head-row{display:flex;align-items:center;gap:36px;height:72px}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:20px;font-weight:500;letter-spacing:-.015em;white-space:nowrap;border-radius:4px}
.brand .brandword{font-weight:800;font-stretch:85%}
/* two tickets under the rail, the second printed blue */
.mark{width:30px;height:30px;flex:none}
.mark .mk-rail{fill:var(--ink)}
.mark .mk-t{fill:var(--paper);stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round}
.mark .mk-b{fill:var(--bleu)}
.nav{display:flex;gap:30px}
.nav a{position:relative;font-size:15px;font-weight:500;padding:8px 0}
.nav a:hover{color:var(--ink-2)}
/* the page you are on is held by a ball, as a ticket on the rail */
.nav a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:-6px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--bleu)}
.head-tools{margin-left:auto;display:flex;align-items:center;gap:10px}
.tbtn{height:38px;min-width:38px;padding:0 12px;border:1.5px solid var(--ink-3);border-radius:999px;background:var(--paper);color:var(--ink);
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.tbtn:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.tbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.menu{display:none}

/* ---------- the head of the home page: the line, and the rail drawn beside it ---------- */
.hero{padding:80px 0 96px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px 56px;align-items:end}
.hero .eyebrow{margin-bottom:26px}
.hero .lead{margin-top:30px}
.hero .cta-row{margin-top:32px}
.hero-art{align-self:center;color:var(--ink)}
.pass-drawing{width:100%;height:auto;overflow:visible}

/* ---------- the head of every other page ---------- */
.page-hero{padding:72px 0 80px}
.page-hero .eyebrow{margin-bottom:24px}
.page-hero .display + .lead{margin-top:28px}
.page-hero .cta-row{margin-top:32px}
.page-hero .more{margin-top:18px}

/* ---------- sections: a hairline between each, and air ---------- */
.section{padding:96px 0 104px}
.section + .section,.page-hero + .section:not(.tight){border-top:1px solid var(--line)}
.section > .wrap > .kicker{margin-bottom:44px}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px 64px;align-items:start}
.split > .kicker,.section > .split > .kicker{margin:0}
.split-head .lead{margin-top:18px;max-width:26ch}

/* ---------- the pass: the steel band that holds the board and the posting form ---------- */
.pass{background:var(--steel);padding:64px 0 96px}
.pass-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.jobs-count{font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--ink-2)}
/* the search: the inputs' box (1.5px, radius 8), a drawn lens in ink; full width on a phone */
.jobs-search{margin-top:24px;max-width:560px}
.jobs-search + .jobs-filters{margin-top:12px}
.jobs-search-input{font:inherit;font-size:16px;font-weight:400;height:48px;width:100%;min-width:0;padding:0 14px 0 44px;
  border:1.5px solid var(--ink-3);border-radius:8px;background-color:var(--paper);color:var(--ink);-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2317191E' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.8'/%3E%3Cpath d='M10.5 10.5 14 14'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 15px center;background-size:16px}
.jobs-search-input:hover{border-color:var(--ink)}
.jobs-search-input:focus-visible{outline:2.5px solid var(--bleu);outline-offset:2px;border-color:var(--ink)}
.jobs-search-input::placeholder{color:var(--ink-3);opacity:1}
.jobs-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:24px}
.jobs-filters .chip{height:38px;padding:0 16px;border:1.5px solid var(--ink-3);border-radius:999px;background:var(--paper);color:var(--ink);
  font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.jobs-filters .chip:hover{border-color:var(--ink)}
.jobs-filters .chip[aria-pressed="true"]{background:var(--bleu);border-color:var(--bleu);color:var(--on-bleu)}
/* "logé" is a toggle, not a kind: it carries its own ball, empty or lit */
#jobsHousing{margin-left:8px}
#jobsHousing::before{content:"";width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor;flex:none}
#jobsHousing[aria-pressed="true"]::before{background:currentColor}
.jobs-select{margin-left:auto;height:38px;max-width:100%;padding:0 38px 0 16px;border:1.5px solid var(--ink-3);border-radius:999px;background-color:var(--paper);
  font:inherit;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2317191E' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:12px}
.jobs-select:hover{border-color:var(--ink)}
.jobs-select + .jobs-select{margin-left:0}   /* the métier and the région side by side, pushed right together */

/* the board: one white card per offer, one per row, stacked like a list you scan in one pass */
.jobs-list{display:flex;flex-direction:column;gap:16px;margin-top:40px}
/* a card: white, a 1px border, radius 12, no shadow, nothing that moves (an offer, the empty state, the form, an offer's page) */
.job,.jobs-empty,.form-card,.offer-card{background:var(--paper);border:1px solid var(--line);border-radius:12px;min-width:0}
/* on a phone and a tablet an offer reads top to bottom: the top line, the role, the restaurant, the facts, the text, the action */
.job{display:flex;flex-direction:column;gap:20px;padding:26px 28px}
.job-head{min-width:0}
/* the top line: the kind in a pill and the date, the place under them where the line is short */
.job-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 14px}
.tag{display:inline-flex;align-items:center;min-height:28px;padding:3px 12px;border:1px solid var(--ink-3);border-radius:999px;
  font-size:13px;font-weight:600;line-height:1.2;color:var(--ink)}   /* one line whenever it fits; « Alternance · Hébergement · exemple » wraps rather than cross into the facts column */
/* "Mise en avant": a paid place at the top, said by a label beside the kind; ink and a thin square-cornered border, never the blue,
   and nothing else about the card changes */
.boost{display:inline-flex;align-items:center;min-height:28px;padding:3px 10px;border:1px solid var(--ink);border-radius:4px;
  font-size:12px;font-weight:600;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);white-space:nowrap;cursor:help}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.job-where{order:3;flex:1 1 100%;margin:0;font-size:15px;line-height:1.35;color:var(--ink-2);min-width:0;overflow-wrap:anywhere}
.job-pub{margin:0 0 0 auto;font-size:14px;line-height:1.35;color:var(--ink-2);white-space:nowrap}
.job h3{font-size:25px;line-height:1.1;letter-spacing:-.02em;margin:0}
.job-link{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:4px}
.job-link:hover{text-decoration-color:var(--ink)}
.job-rest{margin:6px 0 0;font-size:17px;font-weight:500;line-height:1.4;overflow-wrap:anywhere}
/* the facts a candidate decides on: a small label above each value; two columns, four once the box is 520px wide */
.job-facts{display:flex;flex-wrap:wrap;gap:16px 20px;margin:0;min-width:0}
.fact{flex:0 0 clamp(calc(25% - 15px),calc((520px - 100%) * 999),calc(50% - 10px));min-width:0;margin:0}
.fact dt{margin:0 0 3px;font-size:12px;font-weight:600;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.fact dd{margin:0;font-size:16px;font-weight:500;line-height:1.4;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* pay not disclosed: the legal floor in one line under the value; that fact takes its own row, after the others */
.fact.noted{flex-basis:100%;order:1}
.fact dd.fact-note{margin-top:3px;font-size:14px;font-weight:400;line-height:1.4;color:var(--ink-2)}
.job > .job-facts{padding-top:18px;border-top:1px solid var(--line)}
.job > .more{margin:0}
.job .more summary{font-size:15px}
.job .more p{font-size:16px}
/* under a translation, the French original, smaller and grey */
.job-orig{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.job-orig p,.more .job-orig p{margin:0 0 .5em;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.job-orig b{font-weight:600;color:var(--ink)}
.job-orig .job-orig-label{margin-bottom:4px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
html:not([lang="en"]) .only-en{display:none}
.job-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px}
.job-act .link{font-size:15px;font-variant-numeric:tabular-nums}
/* the distinction's place beside every restaurant: a dotted ring while empty, the blue rosette once earned */
.distinction{display:inline-block;width:18px;height:18px;margin-left:8px;vertical-align:-3px}
.distinction svg{width:18px;height:18px}
.distinction.empty{border:1.5px dotted var(--ink-3);border-radius:50%;width:16px;height:16px;vertical-align:-2px}
.sl-o{fill:var(--bleu)}
.sl-i{fill:none;stroke:var(--paper);stroke-width:1.3}
@media (min-width:721px) and (max-width:959px){
  .jobs-select{margin-left:0}   /* on a tablet the two selects wrap under the chips: keep them left-aligned together */
  .job-where{order:0;flex:0 1 auto}
}
/* from 960px an offer is one row in three columns: who and where, the facts, the action */
@media (min-width:960px){
  .job{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;grid-template-areas:"head facts act" "more more .";gap:0 40px;align-items:start;padding:28px 32px}
  .job-head{grid-area:head}
  .job-pub{margin-left:0}   /* the head column is narrow: when the date wraps under the kind it starts at the left, not alone on the right */
  .job > .job-facts{grid-area:facts;padding-top:0;border-top:0}
  .job > .more{grid-area:more;margin-top:18px}
  .job-act{grid-area:act;align-self:center;flex-direction:column;align-items:stretch;gap:10px}
  .job-act .link{align-self:center}
}

/* no offer, or none under these filters: a plain card with the message and the way to post one */
/* how the list is ordered: folded under it, on the steel band */
.jobs-order{margin-top:28px}
.jobs-empty{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;padding:28px}
.jobs-empty p{margin:0;max-width:52ch;font-size:19px;line-height:1.45;font-weight:500;letter-spacing:-.008em}

/* ---------- a real sequence: a line and three balls, read left to right ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 44px;position:relative}
.steps::before{content:"";position:absolute;top:7px;left:7px;right:calc((100% - 88px) / 3 - 7px);height:1.5px;background:var(--ink)}
.step{position:relative;padding-top:40px}
.step::before{content:"";position:absolute;top:0;left:0;width:15px;height:15px;border-radius:50%;
  background:radial-gradient(circle at 35% 32%,#FFFFFF 0,#E3E6EA 34%,#A9B0B8 100%);box-shadow:0 0 0 1.5px var(--ink)}
.step h3{margin:0 0 8px}
.step p{color:var(--ink-2);margin:0;font-size:16px;max-width:34ch}

/* ---------- what an offer says: four folds ---------- */
.facts-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.facts-grid .more{margin:0;max-width:none;border-top:1px solid var(--line);padding:16px 0 20px}
.facts-grid .more summary{font-size:19px;letter-spacing:-.01em}

/* ---------- for restaurants: three columns, a hairline between them ---------- */
.free-banner{margin:0 0 32px;padding:18px 24px;background:var(--steel);color:var(--ink);border-radius:12px;font-size:clamp(18px,1.7vw,20px);line-height:1.4;font-weight:600;letter-spacing:-.008em}   /* the first free season: ink on the steel panel, never the blue */
.tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1.5px solid var(--ink);border-bottom:1px solid var(--line)}
.tier{padding:24px 28px 32px;display:flex;flex-direction:column}
.tier:first-child{padding-left:0}
.tier:last-child{padding-right:0}
.tier + .tier{border-left:1px solid var(--line)}
.tier .name{font-size:15px;font-weight:600;color:var(--ink-2);margin:0 0 16px}
.tier .price{font-size:clamp(34px,3.6vw,48px);line-height:1;font-weight:800;font-stretch:85%;letter-spacing:-.03em;margin:0}
.tier .per{font-size:15px;color:var(--ink-2);margin:10px 0 0}
.tier .note{margin:18px 0 26px;font-size:16px;line-height:1.5}
.tier .btn{margin-top:auto;align-self:flex-start}
.vat-note{margin:14px 0 0}
.vat-note + .more{margin-top:24px}
.price-note{margin:0}

/* ---------- the distinction: a modest mark beside its text ---------- */
.dist{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 28px;align-items:start}
.dist > div:last-child{max-width:44rem}
.seal-wrap{padding-top:2px}
.seal-art{width:clamp(44px,4.6vw,56px);height:auto}
.dist .lead{margin-top:18px}

/* ---------- in practice ---------- */
.more summary.kicker-sum{font-size:clamp(28px,3.2vw,42px);line-height:1.02;font-weight:700;font-stretch:88%;letter-spacing:-.02em;gap:16px}
.more summary.kicker-sum::before{width:32px;height:32px;font-size:16px}
.facts{list-style:none;padding:0;margin:22px 0 0;max-width:70ch}
.facts li{padding:14px 0 14px 26px;border-top:1px solid var(--line);color:var(--ink-2);font-size:16px;position:relative}
.facts li:last-child{border-bottom:1px solid var(--line)}
.facts li::before{content:"";position:absolute;left:2px;top:23px;width:7px;height:7px;border-radius:50%;background:var(--ink)}

/* ---------- the posting form: one white panel on the steel band, its sections split by hairlines ---------- */
.pass-form{padding:56px 0 96px}
.form-card{max-width:960px;padding:40px 44px 44px}
.jobs-form{margin:0}
.f-sec{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,4fr);gap:14px 40px;padding:26px 0 30px;border-top:1px solid var(--line)}
.f-sec:first-child{border-top:0;padding-top:0}
.f-sec:last-child{padding-bottom:0}
.f-sec > .f-label{margin-top:10px;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips .chip{position:relative;display:inline-flex;cursor:pointer}
.chips .chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.chips .chip span{display:inline-flex;align-items:center;height:40px;padding:0 18px;border:1.5px solid var(--ink-3);border-radius:999px;font-size:15px;font-weight:600;background:var(--paper)}
.chips .chip:hover span{border-color:var(--ink)}
.chips .chip input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chips .chip input:focus-visible + span{outline:2.5px solid var(--bleu);outline-offset:3px}
.f-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 20px}
.jobs-form label{display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:600;min-width:0}
.jobs-form input:not([type="checkbox"]):not([type="radio"]),.jobs-form textarea{font:inherit;font-size:16px;font-weight:400;padding:0 14px;height:48px;width:100%;
  border:1.5px solid var(--ink-3);border-radius:8px;background:var(--paper);color:var(--ink);-webkit-appearance:none;appearance:none;min-width:0}
.jobs-form textarea{height:auto;min-height:132px;padding:12px 14px;resize:vertical;line-height:1.5}
.jobs-form input[type="date"],.jobs-form input[type="number"],.jobs-form input[name="dept"],.jobs-form input[type="tel"]{font-family:var(--mono);font-size:15px}
.jobs-form input:hover,.jobs-form textarea:hover{border-color:var(--ink)}
.jobs-form input:focus-visible,.jobs-form textarea:focus-visible{outline:2.5px solid var(--bleu);outline-offset:2px;border-color:var(--ink)}
.jobs-form ::placeholder{color:var(--ink-3);opacity:1}
.jobs-form .f-check{flex-direction:row;align-items:flex-start;gap:12px;font-weight:500;font-size:15px;line-height:1.45}
.jobs-form .f-wide{grid-column:span 2}
/* the two yes/no choices of the offer share one line, under the fields they qualify */
.jobs-form .f-checks{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px 32px}
.jobs-form input:disabled,.jobs-form input:disabled:hover{background:var(--steel);border-color:var(--line);cursor:not-allowed}
.f-check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--ink);flex:none}
.f-count{font-family:var(--mono);font-size:12px;color:var(--ink-2);font-weight:400;letter-spacing:.02em;align-self:flex-end}
.f-note{margin:16px 0 0;max-width:62ch}
.f-lawful{margin-top:22px}
.f-send{margin-top:28px;gap:18px}
.note{font-size:15px;color:var(--ink-2);margin:0;max-width:40ch}
.note.ok{color:var(--ink);font-weight:600;margin-top:20px;padding-left:22px;position:relative}
.note.ok::before{content:"";position:absolute;left:0;top:6px;width:11px;height:11px;border-radius:50%;background:var(--ink)}

/* ---------- contact: the address is the object ---------- */
.address{margin:32px 0 0}
.address .mail{display:inline-block;font-size:clamp(28px,4.6vw,56px);font-weight:700;font-stretch:88%;letter-spacing:-.025em;line-height:1.1;overflow-wrap:anywhere;
  text-decoration:underline;text-decoration-color:var(--ink-3);text-decoration-thickness:3px;text-underline-offset:8px}
.address .mail:hover{text-decoration-color:var(--ink)}

/* ---------- legal: prose, a hairline over each title ---------- */
.prose{max-width:70ch}
.prose h2{font-size:21px;line-height:1.2;font-stretch:90%;letter-spacing:-.012em;margin:40px 0 12px;padding-top:18px;border-top:1px solid var(--line)}
.prose > div > h2:first-child{margin-top:0}
.prose p{font-size:17px;line-height:1.6}
.page-hero + .section.tight{padding-top:0}

/* ---------- an offer's own page (tools/build.py): the same card, the facts as on the board ---------- */
.offer-page{padding-bottom:56px}
.offer-page .lead{max-width:none}
.offer-card{max-width:760px;padding:30px 32px 32px}
.offer-text{margin:24px 0 0;padding-top:20px;border-top:1px solid var(--line);color:var(--ink-2);font-size:16px}
.offer-card .cta-row{margin-top:26px}

/* ---------- the colophon ---------- */
.site-foot{padding:48px 0 28px;border-top:1px solid var(--line)}
main:has(> .pass:last-child) + .site-foot{border-top:0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
.foot-grid nav,.foot-links{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.foot-grid a:not(.brand){font-size:15px;font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--line)}
.foot-grid a:not(.brand):hover{text-decoration-color:var(--ink)}
.foot-grid .small{margin:14px 0 0;max-width:36ch}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;margin-top:40px;padding-top:16px;border-top:1px solid var(--line);
  font-size:14px;color:var(--ink-2);flex-wrap:wrap}
.foot-bottom a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--line)}
.foot-bottom a:hover{color:var(--ink);text-decoration-color:var(--ink)}

/* ---------- motion: nothing on load, nothing on the cards; colours ease on hover ---------- */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .btn,.tbtn,.chip span,.jobs-filters .chip,.nav a,.link,.job-link,.more summary::before,.address .mail,.jobs-form input,.jobs-form textarea,.foot-grid a,.foot-bottom a{transition:background-color .15s,color .15s,border-color .15s,text-decoration-color .15s}
}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .head-tools .btn{display:none}
}
@media (max-width:960px){
  .hero{padding:56px 0 68px}
  .hero-grid{grid-template-columns:1fr}
  .hero-art{max-width:520px;width:100%}
  .split{grid-template-columns:1fr;gap:26px}
  .section{padding:72px 0 80px}
  .facts-grid{grid-template-columns:1fr}
  .tiers{grid-template-columns:1fr}
  .tier,.tier:first-child,.tier:last-child{padding:22px 0 28px}
  .tier + .tier{border-left:0;border-top:1px solid var(--line)}
  .f-sec{grid-template-columns:1fr;gap:14px}
  .f-sec > .f-label{margin-top:0}
  .f-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid > div:first-child{grid-column:1/-1}
}
@media (max-width:760px){
  /* the sequence turns: balls down a vertical line */
  .steps{grid-template-columns:1fr;gap:30px}
  .steps::before{display:none}
  .step{padding:0 0 0 38px}
  .step::before{top:5px}
  .step:not(:last-child)::after{content:"";position:absolute;left:7px;top:20px;bottom:-35px;width:1.5px;background:var(--ink)}
}
@media (max-width:720px){
  .wrap{padding:0 16px}
  .head-row{height:62px;gap:12px}
  .brand{font-size:19px}
  .mark{width:28px;height:28px}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;z-index:40;flex-direction:column;gap:0;background:var(--paper);
    border-bottom:1px solid var(--line);box-shadow:0 14px 20px -12px rgba(var(--shadow),.18);padding:6px 16px 12px;margin:0}
  .nav.open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:17px}
  .nav a:last-child{border-bottom:0}
  .nav a[aria-current="page"]::after{left:auto;right:4px;bottom:auto;top:50%;margin:-3.5px 0 0}
  .menu{display:inline-flex}
  .hero{padding:40px 0 56px}
  .hero .lead{margin-top:22px}
  .hero .cta-row,.page-hero .cta-row{flex-direction:column;align-items:stretch}
  .page-hero{padding:44px 0 56px}
  .section{padding:60px 0 68px}
  .section > .wrap > .kicker{margin-bottom:30px}
  .dist{gap:0 18px}
  .seal-art{width:40px}
  .pass{padding:44px 0 64px}
  .jobs-filters .chip{padding:0 14px}
  #jobsHousing{margin-left:0}
  .jobs-select{margin-left:0;width:100%}
  .jobs-search{max-width:none}
  .jobs-list{gap:12px;margin-top:28px}
  .job{padding:22px 20px}
  .job h3{font-size:23px}
  .job-act .btn{width:100%}
  .jobs-empty{padding:22px 20px}
  .jobs-empty .btn{width:100%}
  .form-card{padding:26px 18px 30px}
  .free-banner{padding:16px 18px;margin-bottom:24px}
  .offer-card{padding:24px 20px 26px}
  .offer-card .cta-row{flex-direction:column;align-items:stretch}
  .f-grid{grid-template-columns:1fr}
  .jobs-form .f-wide{grid-column:auto}
  .f-send{flex-direction:column;align-items:stretch}
  .foot-grid{grid-template-columns:1fr;gap:22px}
}

/* ---------- the questionnaire: two short sections on white paper, then the posting form's white panel ---------- */
.charter{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.charter > div{border-top:1px solid var(--line);padding:22px 0 28px;min-width:0}
.charter h2{font-size:22px;line-height:1.15;font-stretch:90%;letter-spacing:-.012em;margin:0 0 8px}
.charter p{margin:0;color:var(--ink-2);font-size:16px;max-width:52ch}
.charter .more{margin-top:10px}
.dist .cta-row{margin-top:24px}
.step .step-link{margin-top:12px}
/* the form's questions: a small bold line, the answers as chips that may wrap */
.f-qs{display:flex;flex-direction:column;gap:26px;min-width:0}
.f-q{border:0;margin:0;padding:0;min-width:0}
.f-q legend{padding:0;margin:0 0 12px;font-size:15px;font-weight:700;line-height:1.35}
.f-q legend .muted{font-weight:500}
.chips.wrap-ok .chip span{height:auto;min-height:40px;padding:8px 18px;line-height:1.3;border-radius:20px}
.f-period{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.f-period fieldset{border:0;margin:0;padding:0;min-width:0;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:8px}
.f-period legend{padding:0;margin:0 0 7px;font-size:14px;font-weight:600}
.jobs-form select{font:inherit;font-size:16px;font-weight:400;height:48px;width:100%;min-width:0;padding:0 36px 0 14px;border:1.5px solid var(--ink-3);border-radius:8px;
  background-color:var(--paper);color:var(--ink);cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2317191E' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:12px}
.jobs-form select:hover{border-color:var(--ink)}
.jobs-form select:focus-visible{outline:2.5px solid var(--bleu);outline-offset:2px;border-color:var(--ink)}
.jobs-form .f-confirm{margin-top:14px}
.jobs-form .f-confirm:first-child{margin-top:0}
.f-hint{margin:0 0 18px;font-size:15px;color:var(--ink-2);max-width:62ch}
@media (max-width:960px){
  .charter{grid-template-columns:1fr}
}
@media (max-width:720px){
  .f-period{grid-template-columns:1fr}
}

/* four tiers: four columns on a desktop, two by two on a tablet, one column on a phone (the 960px rule above) */
@media (min-width:721px) and (max-width:1180px){
  .tiers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiers .tier{padding:24px 28px 30px;border-left:0;border-top:0}
  .tiers .tier:nth-child(odd){padding-left:0}
  .tiers .tier:nth-child(even){padding-right:0;border-left:1px solid var(--line)}
  .tiers .tier:nth-child(n+3){border-top:1px solid var(--line)}
}

/* ---------- the charter: six commitments as a plain list, the rail's ball before each ---------- */
.pledges{list-style:none;margin:0;padding:0;max-width:46rem;border-top:1.5px solid var(--ink)}
.pledges li{position:relative;padding:18px 0 20px 30px;border-bottom:1px solid var(--line);font-size:clamp(18px,1.7vw,20px);line-height:1.45;font-weight:500;letter-spacing:-.008em}
.pledges li::before{content:"";position:absolute;left:2px;top:27px;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink)}
.pledges-note{margin:22px 0 48px;max-width:46rem;color:var(--ink-2)}
@media (max-width:720px){
  .pledges li{padding:16px 0 18px 26px}
  .pledges li::before{top:24px}
  .pledges-note{margin-bottom:36px}
}