/*
 * The careers pages' own stylesheet. Copied to /careers/assets/careers.css by
 * the build; nothing else on the site links it.
 *
 * It uses this site's OWN design tokens, linked from
 * /_ds/design-system/tokens/, so there is no second copy of the ramp or the
 * type scale to keep in step. The patterns below are the ones tokens alone do
 * not carry: the serif display face, the letterspaced caps eyebrow, the
 * squared geometry and the alternating section bands.
 *
 * The numbers are the live site's computed values, measured off
 * urban-genesis.com on 2026-10-08 for the same pages as they are served today
 * by the hiring app. Kept deliberately identical to that app's
 * src/styles/ug-site/site.css so a candidate cannot tell which project drew
 * the page:
 *
 *   h1    EB Garamond 400 · 49px / 1.14 · navy-800 · ls -0.005em
 *   h2    EB Garamond 400 · 36px / 1.24 · navy-800
 *   prose EB Garamond 400 · 18-19px / 1.75 · navy-600
 *   meta  Montserrat  400 · 13.5px / 1.65 · navy-600
 *   eyebrow Montserrat 600 · 11px uppercase · ls 0.12em · gold-800
 *   nav/button Jost 500 · 12px uppercase · ls 0.16em
 *   radius 0 everywhere — the site is squared, and rounded corners are most of
 *          what makes a page like this read as a web app.
 */

:root {
  /* Every <section> and the <footer> on urban-genesis.com are tinted this way. */
  --surface-band: color-mix(in srgb, var(--grey-100) 55%, #fff);
  /* Page gutter: 72px on the wide site, 40px from 1080px down, 24px on a phone. */
  --site-gutter: clamp(24px, 5vw, 72px);
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--grey-0);
  color: var(--navy-900);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body > main {
  flex: 1 0 auto;
}

a {
  color: var(--gold-800);
  text-decoration: none;
}

a:hover {
  color: var(--navy-700);
}

::selection {
  background: var(--navy-700);
  color: #fff;
}

/* The site's focus ring is a squared double ring, not a rounded glow. */
*:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
  border-radius: 0;
}

img {
  max-width: 100%;
}

/* ── Type patterns ──────────────────────────────────────────────────────── */

/* The eyebrow. Always above a heading, never on its own. */
.ug-eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-800);
}

.ug-display-1,
.ug-display-2 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--navy-800);
  text-wrap: pretty;
  margin: 0;
}

.ug-display-1 {
  font-size: clamp(31px, 4.4vw, 49px);
  line-height: 1.14;
  letter-spacing: -0.005em;
}

.ug-display-2 {
  font-size: clamp(25px, 3.2vw, 36px);
  line-height: 1.24;
}

/* Prose. The serif at 18-19px with a 1.75 leading is the site's reading
   setting, and it is what a job description is set in. */
.ug-prose {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.75;
  color: var(--navy-600);
}

/* Supporting copy — location, employment type, hints. */
.ug-meta {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--navy-600);
}

/* Nav links, buttons, back links. Jost is the one place the display face is
   used, and it is always small, uppercase and widely tracked. */
.ug-caps {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ── Layout rhythm ──────────────────────────────────────────────────────── */

.ug-band {
  padding: clamp(40px, 5vw, 64px) var(--site-gutter);
}

.ug-band-tinted {
  background: var(--surface-band);
}

/* A job description and a listing are a single reading column. */
.ug-column {
  max-width: 760px;
  margin: 0 auto;
}

/* The gold hairline under a heading. 48px wide — the site uses it as a mark,
   not a divider. */
.ug-rule {
  width: 48px;
  height: 2px;
  background: var(--gold-500);
  border: 0;
  margin: 20px 0 0;
}

/* Vertical rhythm, written out because there is no utility layer here. The
   values are the ones the hiring app's pages use. */
.ug-eyebrow + .ug-display-1,
.ug-eyebrow + .ug-display-2 {
  margin-top: 12px;
}

.ug-display-1 + .ug-meta {
  margin-top: 16px;
}

.ug-display-2 + .ug-meta {
  margin-top: 12px;
}

.ug-lede {
  margin-top: 20px;
  max-width: 52ch;
}

.ug-back {
  display: inline-block;
}

.ug-back + .ug-display-1 {
  margin-top: 20px;
}

.ug-cta-row {
  margin: 32px 0 0;
}

.ug-rule + .ug-jobdesc {
  margin-top: 28px;
}

/* ── Controls ───────────────────────────────────────────────────────────── */

/* border-box so the padding sits inside `width: 100%` and `max-width: 320px`
   rather than on top of them. Without it the link buttons ("Apply for this
   job", "See our other openings") ran 66px past the column on a phone, which
   also made the whole page scroll sideways, and stood 86px tall instead of
   52. The form's <button>s were always right: browsers make buttons
   border-box by default, and links are not buttons. */
.ug-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 16px 32px;
  border-radius: 0;
  text-align: center;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.ug-btn-primary {
  background: var(--gold-400);
  color: var(--navy-950);
  border: 1px solid var(--gold-400);
}

.ug-btn-primary:hover {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: #fff;
}

/* The button takes the column on a phone and caps at 320px from 640px up —
   the same `w-full sm:max-w-xs` the hiring app's own job page uses. */
.ug-cta-row .ug-btn {
  width: 100%;
}

@media (min-width: 640px) {
  .ug-cta-row .ug-btn {
    max-width: 320px;
  }
}

/* ── The openings list ──────────────────────────────────────────────────── */

/* Openings are hairline rows, not cards. The design system says it outright —
   "most surfaces use a hairline border instead of a shadow" — and a stack of
   rounded, shadowed cards is most of what made this page look like an app. */
.ug-list {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--grey-200);
}

.ug-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--grey-200);
  color: inherit;
  transition: background 160ms ease;
}

.ug-row:hover {
  background: var(--gold-50);
  color: inherit;
}

.ug-row-main {
  min-width: 0;
}

.ug-row-title {
  display: block;
  font-family: var(--font-serif);
  font-size: 25px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--navy-800);
  transition: color 160ms ease;
}

.ug-row:hover .ug-row-title {
  color: var(--gold-900);
}

.ug-row-main .ug-meta {
  display: block;
  margin-top: 6px;
}

.ug-row-cta {
  flex-shrink: 0;
  color: var(--gold-800);
}

/* On a phone the "View →" chip steals about 70px from a role title that is
   already three words long. The whole row is the link, and a touch device
   shows no hover affordance anyway, so the chip goes. */
@media (max-width: 560px) {
  .ug-row-cta {
    display: none;
  }
}

/* ── The job description, as Dolly renders it ───────────────────────────── */
/*
 * description_html uses exactly six tags — p, h2, ul, li, br and strong. Its
 * <h2>s are the description's own bold section labels, so they are set the way
 * the hiring app sets them: Montserrat, small, uppercase. 18px rather than the
 * site's 19px lede size, which is too loose for forty bullets.
 *
 * EB Garamond is vendored at weights 400 and 500 only, so a bold run would be
 * synthesized by the browser into a smeared faux-bold. font-synthesis-weight
 * renders the real 500 instead.
 */
.ug-jobdesc {
  font-size: 18px;
  font-synthesis-weight: none;
}

.ug-jobdesc > :first-child {
  margin-top: 0;
}

.ug-jobdesc p,
.ug-jobdesc ul {
  margin: 0 0 1em;
}

.ug-jobdesc h2 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-800);
  margin: 28px 0 10px;
}

.ug-jobdesc strong {
  color: var(--navy-800);
  font-weight: 500;
}

.ug-jobdesc ul {
  padding-left: 1.1em;
}

.ug-jobdesc li {
  margin-bottom: 0.3em;
}

/*
 * The pay line, at the foot of the role. Its heading is the description's own
 * h2, so it reads as the role's last section. The description's last list
 * already ends in a 1em bottom margin; this tops it up to the 28px every
 * description heading sits below its predecessor.
 */
.ug-jobpay {
  margin-top: 12px;
}

.ug-jobpay p {
  margin: 0;
  color: var(--navy-800);
}

/* ── Header ─────────────────────────────────────────────────────────────── */
/*
 * urban-genesis.com's header, including its two breakpoints: the full nav
 * needs roughly 1150px beside a 290px logo, so below 1160px it gives way to
 * the menu button, and below 760px the logo steps down again.
 *
 * Its padding is NOT --site-gutter. The site's header holds its contents to
 * the same 1444px column as the rest of the page, so on a wide screen the logo
 * and nav sit inward rather than at the window's edges; the left side is 11px
 * shorter because the logo image carries that much blank space of its own.
 * From 1080px down it is a flat 36px, and on a phone 24px.
 */

.ug-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2.4vw, 32px);
  padding: 14px max(72px, calc((100% - 1444px) / 2)) 14px
    max(61px, calc((100% - 1444px) / 2 - 11px));
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--grey-200);
  flex-wrap: wrap;
}

/* The header stays on screen, so every in-page jump ("Apply for this job",
   a refusal banner) has to land below it rather than under it. These are
   the header's measured heights at each breakpoint. */
html {
  scroll-padding-top: 96px;
}

.ug-header-logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
}

.ug-header-logo img {
  height: 67px;
  width: 290px;
  max-width: none;
  display: block;
  object-fit: contain;
}

.ug-header-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 38px);
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 1 1 auto;
  min-width: 0;
}

.ug-header-link {
  white-space: nowrap;
  display: inline-block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-800);
  border-bottom: 2px solid transparent;
  padding: 8px 12px 6px;
  cursor: pointer;
}

.ug-header-link:hover {
  color: var(--gold-900);
}

/* The current section. On the live site Join renders at weight 600 in
   navy-900 with a gold-500 underline, while the rest sit at 500 in gold-800. */
.ug-header-link[data-current] {
  font-weight: 600;
  color: var(--navy-900);
  border-bottom-color: var(--gold-500);
}

.ug-header-cta {
  white-space: nowrap;
  flex: none;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy-800);
  border: 1px solid var(--gold-500);
  padding: 11px clamp(14px, 1.6vw, 22px);
}

.ug-header-cta:hover {
  background: var(--gold-400);
  border-color: var(--gold-400);
  color: var(--navy-950);
}

/* ── The two <details> panels ───────────────────────────────────────────── */
/*
 * Both the Portals drawer and the small-screen menu are <details>. They hang
 * below the header instead of covering it, so the control that opened them is
 * still there to close them — which is what lets these pages carry no
 * JavaScript of their own.
 */

.ug-header-portals > summary,
.ug-burger > summary {
  list-style: none;
  cursor: pointer;
}

.ug-header-portals > summary::-webkit-details-marker,
.ug-burger > summary::-webkit-details-marker {
  display: none;
}

.ug-header-portals[open] > summary {
  color: var(--navy-900);
  border-bottom-color: var(--gold-500);
}

.ug-header-drawer-grid,
.ug-mobile-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  max-height: calc(100vh - 100%);
  overflow-y: auto;
  background: #fff;
  border-top: 1px solid var(--grey-200);
  border-bottom: 1px solid var(--gold-500);
}

.ug-header-drawer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  padding: 20px max(72px, calc((100% - 1444px) / 2));
  background: var(--grey-200);
}

.ug-header-drawer-grid a {
  display: block;
  background: #fff;
  padding: 18px 34px 20px 24px;
  color: var(--navy-800);
  transition: background 200ms ease;
}

.ug-header-drawer-grid a:hover {
  background: var(--grey-50);
}

.ug-header-drawer-grid .ug-eyebrow {
  display: block;
  margin-bottom: 12px;
}

.ug-portal-title {
  display: block;
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
}

.ug-header-drawer-grid .ug-meta {
  display: block;
  margin-top: 10px;
  max-width: 38ch;
}

.ug-burger {
  display: none;
  margin-left: auto;
}

.ug-header-burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--navy-800);
}

.ug-header-burger:hover {
  color: var(--gold-800);
}

.ug-header-burger > span {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}

.ug-header-burger > span > span {
  height: 1.5px;
  background: currentColor;
  display: block;
}

.ug-mobile-panel {
  padding: 8px 24px 32px;
}

.ug-mobile-link {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--grey-200);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-800);
}

/* The site's menu marks the current section in navy on a pale blue wash. */
.ug-mobile-link[data-current] {
  margin: 0 -24px;
  padding-left: 24px;
  padding-right: 24px;
  color: var(--navy-900);
  background: rgb(232, 238, 246);
}

.ug-mobile-section {
  padding: 16px 0;
  border-bottom: 1px solid var(--grey-200);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-800);
}

.ug-mobile-portal {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--grey-100);
  color: var(--navy-800);
}

.ug-mobile-portal .ug-portal-title {
  font-size: 22px;
}

.ug-mobile-portal .ug-meta {
  display: block;
  margin-top: 5px;
}

.ug-mobile-cta {
  display: block;
  margin-top: 32px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy-950);
  background: var(--gold-400);
  padding: 18px 32px;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
/*
 * The site's own markup writes `border-top: 1px solid var(--gold-500)` and
 * then `border-style: none` on the same element, so no rule renders.
 * Reproduced as it renders, not as it reads.
 */

.ug-footer {
  background: var(--surface-band);
  padding: 22px var(--site-gutter);
}

.ug-footer-row {
  max-width: 1444px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--navy-600);
}

.ug-footer-row a {
  color: var(--navy-600);
  white-space: nowrap;
}

.ug-footer-row a:hover {
  color: var(--navy-900);
}

@media (min-width: 761px) {
  .ug-footer-row {
    flex-wrap: nowrap;
    align-items: flex-start;
  }
  .ug-footer-row > span {
    flex: 1 1 auto;
    min-width: 0;
  }
  .ug-footer-row > a {
    flex: none;
    margin-left: auto;
  }
}

/* ── The site's own breakpoints ─────────────────────────────────────────── */

@media (max-width: 1160px) {
  .ug-header-nav {
    display: none;
  }
  .ug-burger {
    display: block;
  }
  .ug-header-logo img {
    height: 52px;
    width: 225px;
  }
  .ug-header {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  html {
    scroll-padding-top: 77px;
  }
}

@media (max-width: 1080px) {
  .ug-header {
    padding-left: 36px;
    padding-right: 36px;
  }
}

@media (max-width: 760px) {
  .ug-header-logo img {
    height: 46px;
    width: 199px;
  }
  .ug-header {
    padding: 10px 24px;
    flex-wrap: nowrap;
  }
  html {
    scroll-padding-top: 67px;
  }
}

/* ── The application form ───────────────────────────────────────────────────
 *
 * Geometry and type copied from the hiring app's src/styles/ug-site/site.css,
 * which is where this form has lived until now, so a candidate cannot tell
 * which project drew the page. The 16px on inputs is LOAD-BEARING: anything
 * smaller makes iOS Safari zoom the page on focus, and this is a one-screen
 * form filled in from a phone.
 */

.ug-apply-form {
  margin-top: 32px;
  max-width: 34rem;
}

.ug-field {
  margin-top: 24px;
}

.ug-field > .ug-meta {
  margin-top: 6px;
}

.ug-field > .ug-label + .ug-input,
.ug-field > .ug-meta + .ug-input,
.ug-field > .ug-meta + .ug-file,
.ug-field > .ug-label + .ug-file {
  margin-top: 10px;
}

.ug-label {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-800);
}

/* Inputs. 16px is load-bearing — see the note above. */
.ug-input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--grey-300);
  border-radius: 0;
  background: #fff;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--navy-900);
  outline: none;
  box-sizing: border-box;
}

.ug-input:focus {
  border-color: var(--gold-500);
  box-shadow: inset 0 0 0 1px var(--gold-500);
}

.ug-input::placeholder {
  color: var(--grey-500);
}

.ug-textarea {
  min-height: 180px;
  resize: vertical;
}

/* A native file button cannot be restyled, so only ::file-selector-button is,
   borrowing the secondary button's geometry. */
.ug-file {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--navy-800);
}

.ug-file::file-selector-button {
  margin-right: 16px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--grey-400);
  border-radius: 0;
  background: #fff;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy-800);
  cursor: pointer;
}

.ug-file::file-selector-button:hover {
  border-color: var(--gold-500);
  color: var(--gold-900);
}

.ug-fieldset {
  border: 0;
  margin-inline: 0;
  padding: 0;
}

.ug-choices {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

@media (min-width: 560px) {
  .ug-choices {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Real radios in a real fieldset, so the browser enforces "pick one" on
   submit and a screen reader announces one question with three answers. The
   52px tap target is the point. */
.ug-choice {
  display: flex;
  min-height: 52px;
  cursor: pointer;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--grey-300);
  background: #fff;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--navy-800);
  transition: border-color 160ms ease, background 160ms ease;
}

.ug-choice:hover {
  border-color: var(--gold-500);
}

/* No script to set a data attribute, so the checked radio styles its own
   label. :has() is what makes that possible without one. */
.ug-choice:has(input:checked) {
  border-color: var(--gold-600);
  background: var(--gold-50);
  font-weight: 600;
}

.ug-choice input {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  accent-color: var(--gold-600);
}

.ug-apply-form button[type="submit"] {
  margin-top: 32px;
}

.ug-apply-notice {
  margin: 20px 0 0;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--navy-600);
  max-width: 52ch;
}

/* Off-screen, not display:none — a bot that reads the computed style skips a
   hidden field, and the point is that it fills this one in. */
/* Also carries the `hidden` attribute. Never off-screen positioning instead:
   an off-screen field is still fillable, and autofill filled it (2026-10-27). */
.ug-honeypot {
  display: none !important;
}

/* ── Refusals, revealed with no JavaScript ──────────────────────────────────
 *
 * The apply endpoint sends a refused application back here as
 * /careers/jobs/<id>#apply-error-<code>. Each code has its own banner, hidden
 * until the fragment makes it the :target — at which point the browser both
 * reveals it and scrolls to it. No script reads the URL. Tapping "Apply for
 * this job" moves the target and the banner closes itself.
 */
.ug-apply-error {
  display: none;
  margin: 24px 0 0;
  border: 1px solid var(--red-600);
  background: var(--red-100);
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--red-600);
  max-width: 34rem;
  /* On top of the header's own scroll-padding-top, so the banner is not
     flush against the header. */
  scroll-margin-top: 24px;
}

.ug-apply-error:target {
  display: block;
}

/* The typed-experience fallback. A <details>, so the choice is made in markup
   and the page needs no script to switch fields. */
.ug-apply-alt {
  margin-top: 40px;
  border-top: 1px solid var(--grey-200);
  padding-top: 24px;
  max-width: 34rem;
}

.ug-apply-alt > summary {
  display: inline-block;
  padding: 6px 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--gold-800);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  list-style: none;
}

.ug-apply-alt > summary::-webkit-details-marker {
  display: none;
}

.ug-apply-alt > summary:hover {
  color: var(--gold-900);
}