/* =========================================================================
   LRO Jobs — board styles (V3 redesign)
   Dark search hero, "Latest Job Postings" list, two-column single view
   (the red "Let's Start a Conversation" band is the theme's shared one).
   Type: Chivo (display) + Source Sans 3 (body).
   ========================================================================= */

.lroj {
	--red: #d32027;
	--red-bright: #ed2126;  /* action buttons (search submit / Apply) — design uses the brighter red */
	--red-dark: #b01a20;
	--red-ink: #ffffff;
	--ink: #000000;         /* headings / strong text — design is pure #000 (was #111) */
	--body-fg: #000000;     /* body text — design fact values + prose are pure #000 (was #34373b) */
	--muted: #404042;       /* meta / breadcrumb text — design charcoal #404042 (was #2b2b2b) */
	--line: #b5b5b5;        /* card borders (design #b5b5b5) */
	--rule: #b5b5b5;        /* row dividers (design #b5b5b5) */
	--ui-line: #b5b5b5;     /* input borders (design #b5b5b5) */
	--page: #f4f4f5;        /* near-white page ground (design) */
	--card: #ffffff;
	--hero: #0c0c0d;        /* near-black hero */
	--hero-2: #17171a;

	--display: "Chivo", system-ui, sans-serif;
	--body: "Source Sans 3", system-ui, -apple-system, sans-serif;

	--r: 0.75rem;
	--r-sm: 0.5rem;
	--r-pill: 999px;
	--shadow-sm: 0 2px 0.625rem rgba(15, 15, 20, 0.06);
	--shadow: 0 1.25rem 2.8125rem -1.5rem rgba(15, 15, 20, 0.28);
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--tap: 2.75rem;
	--wrap: 109.9375rem; /* 1759px @16 — scales with the root like the theme */ /* container width from the V3 design (2000px artboard, 120px margins) */
	--gutter: 3rem; /* 48px @16 — root scaling replaces the old fluid clamp */

	font-family: var(--body);
	color: var(--body-fg);
	background: var(--page);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.lroj *, .lroj *::before, .lroj *::after { box-sizing: border-box; }
.lroj [hidden] { display: none !important; }
.lroj .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.lroj img { max-width: 100%; height: auto; }
.lroj a { text-decoration: none; }
/* Inherit as a zero-specificity fallback so explicit color rules (buttons, titles) always win. */
:where(.lroj a) { color: inherit; }
.lroj :where(h1, h2, h3, h4) { font-family: var(--display); color: var(--ink); margin: 0; line-height: 1.1; }

/* Accessible focus (calm on light, visible on dark). */
.lroj :where(a, button):focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 4px; }
.lroj :where(input, select, textarea):focus-visible { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(211, 32, 39, 0.16); }
/* On the dark hero the red ring fails 3:1 against the charcoal gradient; use white there. */
.lroj-hero :where(a, button):focus-visible { outline-color: #fff; }
.lroj-hero select:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: none; border-color: #6f6f70; }
/* The search input fills its white pill, so the ring lives on the pill (white on the dark hero). */
.lroj-search:focus-within { outline: 3px solid #fff; outline-offset: 3px; border-radius: 8px; }
.lroj-hero .lroj-search input:focus-visible { box-shadow: none; }
.lroj input::placeholder, .lroj textarea::placeholder { color: #565658; opacity: 1; }

/* ---- Buttons ---------------------------------------------------------- */
.lroj-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5625rem;
	/* Buttons are Source Sans 3 SemiBold in the .ai ("Learn More" = SS3 SemiBold 26pt). */
	font-family: var(--body); font-weight: 600; font-size: 0.9375rem; line-height: 1;
	min-height: var(--tap); padding: 0.8125rem 1.5rem; border: 0; border-radius: var(--r-sm);
	cursor: pointer; transition: background 0.18s var(--ease), transform 0.18s var(--ease); text-align: center;
}
.lroj a.lroj-btn { text-decoration: none; }
.lroj-btn--primary { background: var(--red); color: #fff; }
.lroj-btn--primary:hover { background: var(--red-dark); color: #fff; }
.lroj-btn--ghost { background: transparent; color: var(--red); border: 1.5px solid var(--red); }
.lroj-btn--ghost:hover { background: var(--red); color: #fff; }
.lroj-btn--block { width: 100%; }
.lroj-btn.is-loading { opacity: 0.7; pointer-events: none; }

/* =========================================================================
   HERO (dark search band)
   ========================================================================= */
.lroj-hero {
	position: relative;
	background-color: #000000;
	background-image: linear-gradient(128deg, #404042 0%, #2d2d2e 25%, #1b1b1c 50%, #0b0b0b 75%, #000000 100%);
	color: #fff;
	padding: 3.5rem var(--gutter) 5.6875rem;  /* mock: filters bottom -> band bottom = 91px */
	overflow: hidden;
}
/* Dotted ring pattern, faded out toward the left like the mockup (rings barely
   register on the charcoal side and read fully on the black side). */
.lroj-hero::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background-image: radial-gradient(circle, transparent 0 0.25rem, rgba(255, 255, 255, 0.19) 0.25rem 0.3375rem, transparent 0.3375rem);
	background-size: 3.25rem 3.25rem;
	background-position: -0.375rem -0.375rem;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.06) 10%, rgba(0, 0, 0, 0.45) 26%, rgba(0, 0, 0, 0.85) 42%, #000 58%);
	mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.06) 10%, rgba(0, 0, 0, 0.45) 26%, rgba(0, 0, 0, 0.85) 42%, #000 58%);
}
.lroj-hero__inner { z-index: 1; }
/* scattered red accent dots, positioned to match the design mockup */
.lroj-hero::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background-image:
		radial-gradient(circle at 4% 23.5%, var(--red) 0 0.25rem, transparent 0.2812rem),
		radial-gradient(circle at 26% 44.5%, var(--red) 0 0.25rem, transparent 0.2812rem),
		radial-gradient(circle at 87% 2%, var(--red) 0 0.25rem, transparent 0.2812rem),
		radial-gradient(circle at 60% 33%, var(--red) 0 0.2188rem, transparent 0.25rem),
		radial-gradient(circle at 75% 55%, var(--red) 0 0.2188rem, transparent 0.25rem),
		radial-gradient(circle at 10% 87%, var(--red) 0 0.2188rem, transparent 0.25rem),
		radial-gradient(circle at 75% 98%, var(--red) 0 0.1875rem, transparent 0.2188rem);
}
/* On board pages the theme header overlays the hero, so clear it. */
.lroj-board-page .lroj-hero { padding-top: 12.75rem;  /* mock: hero title center at y245 */ }
.lroj-hero__inner { max-width: var(--wrap); margin: 0 auto; position: relative; }
.lroj-hero__title {
	/* Phones land at ~21px (one line, filling the width like the mobile mockup); desktop caps at 50px. */
	/* Explicit family/line-height: on single job pages this heading is a <p> (the job title owns
	   the H1), so it must not rely on the h1-h4 Chivo rule above. */
	font-family: var(--display); line-height: 1.1;
	font-weight: 700; font-size: 4.25rem; letter-spacing: 0;  /* mock: 68px, ls 0 */
	color: #fff; margin: 0 0 1.5rem;
}

/* Search bar */
.lroj-searchbar { position: relative; }
.lroj-searchrow { display: flex; align-items: center; gap: 0.75rem; }
.lroj-search {
	position: relative; flex: 1; display: flex; align-items: center;
	background: #fff; border-radius: 0.5rem;
}
.lroj-search__icon { position: absolute; left: 1.25rem; color: #6b6e73; font-size: 1rem; pointer-events: none; }
.lroj-search input {
	flex: 1; width: 100%; border: 0; background: transparent; outline: none;
	font-family: var(--body); font-size: 1.625rem; color: var(--ink);  /* mock: 26px */
	min-height: 5rem; padding: 0 1rem 0 3.75rem;
}
.lroj-search__submit {
	/* Mock: a 74.7px circle that fills the search pill height, bright red, 32px arrow. */
	flex: none; width: 4.6667rem; height: 4.6667rem; border-radius: 50%; border: 0; cursor: pointer;
	background: var(--red-bright); color: #fff; font-size: 2rem;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background 0.18s var(--ease);
}
.lroj-search__submit:hover { background: var(--red-dark); }

/* Filter dropdowns — three across, sized to the mock (393.9px each, 61.6px gap,
   so the row spans x120->x1425 and the hero doesn't read empty on the right). */
.lroj-filters { display: flex; gap: 3.85rem; margin-top: 1.6875rem; }  /* mock: 61.6px gap, boxes at y413.7 */
.lroj-select { position: relative; flex: 0 1 24.62rem; min-width: 0; }  /* mock: 393.9px */
.lroj-select select {
	appearance: none; width: 100%; cursor: pointer;
	font-family: var(--body); font-size: 1.625rem; font-weight: 400; color: #fff;  /* mock: 26px w400 */
	background: #383838; border: 1px solid #ffffff; border-radius: 0.375rem;  /* mock: crisp white hairline */
	min-height: 4.0625rem; padding: 0.6875rem 2.75rem 0.6875rem 1.25rem;  /* mock box ~65px */
	transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.lroj-select select:hover { border-color: #8a8a8a; }
.lroj-select select option { color: var(--ink); background: #fff; }
/* Divider under the pinned "Remote" option; browsers that don't support <hr> in <select> drop it. */
.lroj-select select hr, .lroj-select-wrap select hr { border: none; border-top: 1px solid #c9c9c9; margin: 0.25rem 0; }
.lroj-select::after {
	/* Solid filled triangle (fa-caret-down) to match the mockup, not a stroked chevron. */
	content: "\f0d7"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.875rem;
	position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
	color: #ffffff; pointer-events: none;
}
.lroj-hero__search-btn { display: none; margin-top: 0.875rem; }

/* =========================================================================
   BOARD BODY (Latest Job Postings list)
   ========================================================================= */
.lroj-board { background: var(--page); padding: 3.25rem var(--gutter) 4.5rem; }
.lroj-board__inner { max-width: var(--wrap); margin: 0 auto; }
.lroj-board__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.lroj-board__title { font-weight: 500; font-size: 3.375rem; letter-spacing: -0.005em; color: var(--ink); }  /* mock: 54px */
.lroj-board__count { font-size: 0.9375rem; color: var(--muted); font-weight: 600; }

/* Active filter chips */
.lroj-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.875rem 0 0; }
.lroj-chips:empty { margin: 0; }
.lroj-chip {
	display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; border: 0;
	background: var(--ink); color: #fff; border-radius: var(--r-pill);
	font-family: var(--body); font-size: 0.875rem; font-weight: 600; padding: 0.375rem 0.75rem;
}
.lroj-chip i { font-size: 0.6875rem; opacity: 0.75; }

/* The list */
.lroj-list { margin-top: 1.125rem; border-top: 1px solid var(--rule); }
.lroj-results[aria-busy="true"] .lroj-list { opacity: 0.5; transition: opacity 0.2s; }

.lroj-row {
	display: flex; align-items: center; justify-content: space-between; gap: 1.75rem;
	padding: 1.71rem 0; border-bottom: 1px solid var(--rule);  /* mock row pitch 154.2px */
}
.lroj-row__main { min-width: 0; flex: 1; }
.lroj-row__title {
	/* Chivo Regular per the .ai (job title = Chivo Regular 32pt ~ 24px at desktop). */
	display: block; font-family: var(--display); font-weight: 400; font-size: 2rem;  /* mock: 32px at the 2000 artboard (the old ~24px was a stale down-conversion) */
	color: var(--ink); letter-spacing: -0.005em; margin: 0 0 0.35rem; transition: color 0.15s;
}
a.lroj-row__title:hover { color: var(--red); }
/* Fixed columns so the meta aligns like a table across every row. */
.lroj-row__meta { display: grid; grid-template-columns: 1.7fr 1fr 0.95fr 1.05fr 0.8fr; gap: 0.375rem 1.125rem; align-items: center; }
/* Meta text is Source Sans 3 Regular per the .ai (24pt ~ 16px), near-black ink; only icons stay grey. */
.lroj-meta-item { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.625rem; font-weight: 400; letter-spacing: 0.005em; color: var(--ink); min-width: 0; white-space: nowrap; }  /* mock: 26px */
.lroj-meta-item:first-child { font-size: 1.5rem; letter-spacing: -0.005em; }  /* mock: the category runs 24px */
/* Text sits in an inner <span> so overflow degrades to an ellipsis, not a hard mid-word clip. */
.lroj-meta-item > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lroj-meta-item i { font-size: 1.375rem; color: #b5b5b5; width: 1.5rem; text-align: center; flex: none; }  /* mock: 22px #b5b5b5 */
.lroj-meta-item--salary { color: var(--ink); }
.lroj-row__cta { flex: none; margin-right: 2.0625rem; }  /* mock pill right edge 33px inside the container */
.lroj-row__cta .lroj-btn { padding: 0.65rem 1.5rem; font-size: 1.625rem; font-weight: 600; min-height: 3.40625rem; border-radius: 0.375rem; }  /* mock pill 173.9 x 54.5, label 26/600 */

/* Empty + pagination */
.lroj-empty { text-align: center; padding: 3.75rem 1.25rem; color: var(--muted); }
.lroj-empty__title { font-family: var(--display); font-weight: 700; font-size: 1.25rem; color: var(--ink); margin: 0 0 0.5rem; }
.lroj-empty__cta { margin-top: 1.25rem; }

.lroj-pagination { display: flex; align-items: center; justify-content: center; gap: 0.375rem; margin-top: 2.125rem; }
.lroj-page {
	display: inline-flex; align-items: center; justify-content: center; min-width: 3rem; height: 3rem; padding: 0 0.75rem;
	border-radius: var(--r-pill); font-weight: 600; font-size: 1.5rem; color: var(--ink); background: transparent;  /* mock: SS3 600/500 24 */
}
/* Interactive pagination links get a 44px hit target (decorative single-job spans stay 38px). */
a.lroj-page { min-width: 2.75rem; height: 2.75rem; }
.lroj-page:hover { background: rgba(0, 0, 0, 0.06); }
.lroj-page.is-current { background: var(--ink); color: #fff; }
.lroj-page--next { gap: 0.375rem; color: var(--ink); }
.lroj-page--dots { pointer-events: none; min-width: 1.5rem; padding: 0 0.25rem; color: var(--muted); }
.lroj-page--dots:hover { background: none; }

/* =========================================================================
   SINGLE JOB (two-column)
   ========================================================================= */
.lroj-single { background: var(--page); padding: 2.75rem var(--gutter) 4.5rem; }
/* Mock: sidebar 547.6px, 60px gap -> detail card 1154px (was a 320px sidebar
   that squeezed the detail to 1406px and wrapped the related-card titles to 4
   lines). */
.lroj-single__inner { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 34.225rem minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 3.75rem; row-gap: 1rem; align-items: start; }
.lroj-single__inner > .lroj-back { grid-column: 1; grid-row: 1; align-self: start; }
.lroj-single__inner > .lroj-aside { grid-column: 1; grid-row: 2; }
.lroj-single__inner > .lroj-detail { grid-column: 2; grid-row: 1 / span 2; }

/* Board pagination belongs to the listing only — never on a job-detail page
   (it was leaking in beneath the related-role cards). */
.lroj-single-page .lroj-pagination { display: none; }

/* Sidebar */
.lroj-aside { display: flex; flex-direction: column; gap: 1rem; }
/* "See All Jobs" link back to the search results, above the related roles. */
.lroj-back { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--body); font-weight: 600; font-size: 1.625rem; color: var(--ink); }  /* board body-UI size (no direct spec line; 26 like all UI text) */
.lroj-back i { transition: transform 0.18s var(--ease); }
.lroj-back:hover { color: var(--red); }
.lroj-back:hover i { transform: translateX(-0.1875rem); }
.lroj-aside__label { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--display); font-weight: 700; font-size: 1.0625rem; color: var(--red); }
.lroj-relcard {
	display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
	padding: 2.1875rem 1.875rem; transition: border-color 0.15s, box-shadow 0.15s;  /* was 35px 30px — rem so it scales with the root */
}
.lroj-relcard:hover { border-color: var(--ui-line); box-shadow: var(--shadow-sm); }
.lroj-relcard.is-current { border-color: var(--ink); }
.lroj-relcard__title { font-family: var(--display); font-weight: 400; font-size: 2rem; color: var(--ink); line-height: 1.18; letter-spacing: -0.005em; margin: 0 0 0.75rem; }  /* mock: Chivo 400 32, lh 37.9/32=1.18 (long real titles wrap; 1.35 read too tall) */
.lroj-relcard__meta { display: flex; flex-wrap: wrap; gap: 0.375rem 1.375rem; }
.lroj-relcard__meta .lroj-meta-item { font-size: 1.625rem; }  /* mock: 26 like the list rows */

/* After-search extras (screen 04): shown on mobile via the is-searched state. */
.lroj-alertlink { display: none; align-items: center; gap: 0.5rem; font-family: var(--body); font-weight: 600; font-size: 0.9375rem; color: var(--red-dark); margin: 0 0 1rem; }
.lroj-alertlink .lroj-bell { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
.lroj-board__alert { display: none; margin-top: 1.625rem; }

/* Mobile single-job pull tab (screen 05): hidden on desktop. */
.lroj-sheet-tab { display: none; }

/* Modal logo (mobile full-screen apply sheet, screens 08/09). */
.lroj-modal__logo { display: none; }

/* Viewport-scoped text (e.g. Apply vs Apply Now). */
.lroj-mob-only { display: none; }

/* Create a job alert card */
.lroj-alertcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 2.75rem 1.875rem; }
.lroj-alertcard__head { display: inline-flex; align-items: center; gap: 0.5625rem; font-family: var(--display); font-weight: 500; font-size: 2rem; color: var(--ink); margin: 0 0 1rem; }  /* mock: 32 */
.lroj-alertcard__head i { color: var(--red); }
.lroj-alertcard__head .lroj-bell { width: 1.15em; height: 1.15em; color: var(--red); flex: 0 0 auto; }
.lroj-field { margin: 0 0 0.875rem; }
.lroj-field > label, .lroj-field__label { display: block; font-size: 1.625rem; font-weight: 400; color: var(--ink); margin: 0 0 0.375rem; }  /* mock: 26 */
.lroj-field input[type="email"], .lroj-field input[type="text"], .lroj-field input[type="tel"], .lroj-field select, .lroj-field textarea {
	/* >=16 REAL px at any root keeps iOS Safari from zooming the viewport on
	   focus (1rem alone shrinks below 16 once the proportional root scales down). */
	width: 100%; font-family: var(--body); font-size: max(1rem, 16px); color: var(--ink);
	background: #fff; border: 1px solid var(--ui-line); border-radius: var(--r-sm); min-height: 2.875rem; padding: 0.6875rem 0.875rem;
}
.lroj-field textarea { min-height: 6rem; resize: vertical; }
.lroj-select-wrap { position: relative; }
.lroj-select-wrap::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.6875rem; position: absolute; right: 0.875rem; top: 50%; transform: translateY(-50%); color: #6b6e73; pointer-events: none; }
.lroj-select-wrap select { appearance: none; padding-right: 2.5rem; cursor: pointer; }

/* Desktop alert card matches the BSINGLE-desktop artboard. The generic
   .lroj-field default (46px box, 16px text) is tuned for the compact apply
   modal; the sidebar alert form is bigger: 55.8px inputs with 26px text (so
   the fields no longer look dwarfed by their 26px labels), and a COMPACT
   bright-red submit pill — the shared --block class otherwise stretched it to
   a full-width, thin, dull-red bar. Scoped >=769px so the phone layout keeps
   its own compact sizing. */
@media (min-width: 769px) {
	.lroj-alertcard .lroj-field input[type="email"],
	.lroj-alertcard .lroj-field input[type="text"],
	.lroj-alertcard .lroj-field select {
		min-height: 3.4875rem;                 /* mock input box 55.8px */
		font-size: max(1.625rem, 16px);        /* mock 26px; >=16px guards iOS zoom */
		padding: 0.5rem 1.125rem;              /* keep content < min-height so the box holds 55.8px */
	}
	.lroj-alertcard .lroj-btn--block { width: auto; }  /* compact, not full-width */
	.lroj-alertcard .lroj-btn--primary {
		font-size: 1.625rem;                   /* 26px, like the Apply pill */
		min-height: 3.40625rem;                /* mock button 54.5px */
		padding: 0.65rem 2.3rem;
		background: var(--red-bright);         /* mock #d4141c ≈ bright action red */
	}
	.lroj-alertcard .lroj-btn--primary:hover { background: var(--red-dark); }
}

/* Main detail card */
.lroj-detail { background: var(--card); border-radius: var(--r); border: 1px solid var(--line); padding: 2.5625rem; }
/* The card sizes to its content at every width. It used to be capped on
   desktop at the .ai spec height (max-height: 98.2281rem) with the
   description scrolling inside it, but that inner scroller was invisible
   (no visible thumb until hover, no fade, no affordance) and silently hid
   up to ~73% of a posting — everything from "About You" through the salary
   range and "How to Apply". The sidebar is a separate grid row and the
   inner grid uses align-items:start, so the taller card needs no alignment
   compensation. */
.lroj-detail__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
/* The rules below were stale "0.735 scale" values (the pre-proportional
   model) — re-authored 2026-07 to the raw BSINGLE artboard px like the rest
   of board.css: prose/crumb/apply 26, facts 20/24, title 54 (spec_bsingle). */
/* Mock (JOB_BOARD_DESKTOP-V3): a compact 134 x 54.5 bright-red pill — the old
   4.55rem side padding blew it out to 209px wide. */
.lroj-detail__apply { font-size: 1.625rem; padding: 0.75rem 2.3rem; background: var(--red-bright); }
.lroj-detail__crumb { font-size: 1.625rem; color: var(--muted); }  /* mock: 26 */
.lroj-detail__crumb .sep { margin: 0 0.5rem; color: var(--line); }
.lroj-detail__title { font-family: var(--display); font-weight: 500; font-size: 3.375rem; color: var(--ink); letter-spacing: -0.005em; margin: 0.875rem 0 1.625rem; }  /* mock: Chivo 500 54 ls-0.005 */
.lroj-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem; }
.lroj-fact__label { font-size: 1.25rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); margin: 0 0 0.6875rem; }  /* mock: SS3 600 20 +0.04em */
.lroj-fact__value { font-size: 1.5rem; letter-spacing: -0.005em; color: var(--body-fg); margin: 0; }  /* mock: SS3 400 24 */
.lroj-detail__rule { height: 1px; background: var(--line); margin: 1.75rem 0; }

/* Prose (description) */
.lroj-prose { font-size: 1.625rem; line-height: 1.385; color: var(--body-fg); }  /* mock: SS3 400 26, lh 36.01/26 */
.lroj-prose h2, .lroj-prose h3, .lroj-prose strong, .lroj-prose b { color: var(--ink); }
/* Section headings inside the description ('About the Opportunity', 'Duties
   include...') are Source Sans 3 SemiBold 26 in the mock — not Chivo. */
.lroj-prose h2, .lroj-prose h3 { font-family: var(--body); font-weight: 600; font-size: 1.625rem; margin: 1.5rem 0 0.625rem; }
.lroj-prose p { margin: 0 0 1.875rem; }
.lroj-prose ul, .lroj-prose ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.lroj-prose li { margin: 0 0 0.4375rem; }
.lroj-prose a { color: var(--red); text-decoration: underline; }

/* End-of-description Apply CTA (desktop). Hidden below 901px, where the
   mockup already places a full-width Apply Now under the facts. */
.lroj-detail__foot { display: none; }
@media (min-width: 901px) {
	.lroj-detail__foot { display: block; margin-top: 2.25rem; padding-top: 2.25rem; border-top: 1px solid var(--line); }
	.lroj-detail__apply--foot { min-width: 17.5rem; }
}

/* =========================================================================
   Modal (apply + thank-you)
   ========================================================================= */
.lroj-modal { position: fixed; inset: 0; z-index: 100000; display: none; }
.lroj-modal.is-open { display: flex; align-items: center; justify-content: center; }
.lroj-modal__scrim { position: absolute; inset: 0; background: rgba(10, 10, 12, 0.55); }
.lroj-modal__panel {
	position: relative; z-index: 1; background: #fff; border-radius: 1rem;
	width: min(45rem, calc(100% - 2rem)); max-height: calc(100vh - 3rem); overflow-y: auto;
	margin: 0 auto; padding: 2.75rem;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.lroj-modal__close { position: absolute; top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; border: 0; background: transparent; border-radius: 50%; cursor: pointer; color: var(--ink); font-size: 1.25rem; display: inline-flex; align-items: center; justify-content: center; }
.lroj-modal__close:hover { background: rgba(0, 0, 0, 0.06); }
body.lroj-modal-open { overflow: hidden; }

/* Forms inside modal / cards */
.lroj-form__title { font-family: var(--display); font-weight: 700; font-size: 1.375rem; color: var(--ink); letter-spacing: -0.01em; margin: 0 0 0.625rem; padding-right: 2.5rem; }
.lroj-form__intro { font-size: 0.9688rem; line-height: 1.55; color: var(--body-fg); margin: 0 0 1.375rem; padding-right: 1.875rem; }
.lroj-form__hint { display: block; font-size: 0.875rem; color: var(--muted); margin: 0.375rem 0 0; }
.lroj-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.lroj-file { display: inline-flex; align-items: center; gap: 0.75rem; }
.lroj-file input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.lroj-file { position: relative; }
.lroj-file:focus-within .lroj-file__btn { outline: 2px solid var(--red); outline-offset: 2px; }
.lroj-file__btn { display: inline-flex; align-items: center; background: var(--red); color: #fff; font-weight: 700; font-size: 0.875rem; padding: 0.6875rem 1.25rem; border-radius: var(--r-sm); cursor: pointer; }
.lroj-file__btn:hover { background: var(--red-dark); }
.lroj-file__name { font-size: 0.875rem; color: var(--muted); }
/* Equal top/bottom margins so the consent line sits evenly between the last
   input and the button (the top margin also wins the collapse against the
   field's 0.875rem, so both gaps land ~equal). No min-height: with a
   top-aligned checkbox it padded empty space BELOW the text when the line
   doesn't wrap, shoving the line up toward the input. */
.lroj-check { display: flex; gap: 0.625rem; align-items: flex-start; font-size: max(1.125rem, 15px); line-height: 1.5; color: var(--body-fg); margin: 1.25rem 0; }  /* font was 0.875rem; the proportional root shrank the consent line to ~10px on desktop — max(1.125rem,15px) keeps it readable at every width */
.lroj-check input { margin-top: 0.1875rem; flex: none; }
.lroj-hp { position: absolute; left: -624.9375rem; width: 1px; height: 1px; overflow: hidden; }
.lroj-form__status { margin-top: 0.75rem; font-weight: 600; font-size: 0.875rem; }
.lroj-form__status.is-ok { color: #1a7f37; }
.lroj-form__status.is-error { color: var(--red); }
.lroj-form.is-done .lroj-form__body { display: none; }

/* Thank-you state */
.lroj-thanks { display: none; text-align: center; padding: 1.25rem 0.625rem 0.5rem; }
.lroj-form.is-done .lroj-thanks { display: block; }
.lroj-thanks__mark { width: 4.75rem; height: 4.75rem; border-radius: 50%; background: #7ac043; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 2.125rem; margin: 0 0 1.375rem; }
.lroj-thanks__title { font-family: var(--display); font-weight: 700; font-size: 1.75rem; color: var(--ink); margin: 0 0 0.875rem; }
.lroj-thanks__text { font-size: 1rem; line-height: 1.6; color: var(--body-fg); max-width: 44ch; margin: 0 auto 1.5rem; }
/* Alert-card variant (narrow sidebar/inline card): scale the state down. */
.lroj-alertcard .lroj-thanks { padding: 0.375rem 0 0; }
.lroj-alertcard .lroj-thanks__mark { width: 3.5rem; height: 3.5rem; font-size: 1.5rem; margin-bottom: 1rem; }
.lroj-alertcard .lroj-thanks__title { font-size: 1.3125rem; }
.lroj-alertcard .lroj-thanks__text { font-size: 0.9375rem; margin-bottom: 0.25rem; }

/* =========================================================================
   STANDALONE MESSAGE PAGE (twig/alert-message.twig)
   The job-alert confirm / unsubscribe landing page. It has no hero, so it
   owns its own top padding to clear the floating header, and it must use the
   SAME measure as every other board surface (--wrap centred inside --gutter)
   or the content runs to the viewport edge while the CTA band and footer
   below it stay inset. Both route branches (success and expired link) render
   this markup, so the type scale has to read for a one-line "Link expired"
   and for the longer confirmation copy alike.
   ========================================================================= */
.lroj-message { background: var(--page); padding: 6.5rem var(--gutter) 7.5rem; }
.lroj-message__inner {
	max-width: var(--wrap); margin: 0 auto;
	display: flex; flex-direction: column; align-items: center; text-align: center;
}
/* Circular badge like the in-form thank-you mark, so the glyph reads as a
   deliberate icon rather than a stray character bleeding off the left edge. */
.lroj-message__mark {
	flex: none; width: 5.5rem; height: 5.5rem; border-radius: 50%;
	background: rgba(211, 32, 39, 0.1); color: var(--red);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 2.25rem; margin: 0 0 1.75rem;
}
/* 54px on the artboard scale: the board's own section-heading size, so this
   H1 sits in the site's type scale instead of the browser default. */
.lroj-message__title {
	font-family: var(--display); font-weight: 700; font-size: 3.375rem; line-height: 1.1;
	letter-spacing: -0.005em; color: var(--ink); margin: 0 0 1.125rem;
}
.lroj-message__lead {
	font-family: var(--body); font-size: 1.625rem; line-height: 1.45; color: var(--body-fg);
	max-width: 46ch; margin: 0 0 2.25rem;
}
/* Match the board row CTA so the primary action is the same pill everywhere. */
.lroj-message .lroj-btn { font-size: 1.625rem; font-weight: 600; min-height: 3.40625rem; padding: 0.65rem 1.75rem; border-radius: 0.375rem; }

@media (max-width: 768px) {
	/* Phones scale the root UP (16-18px) while laptops floor it at 12px, so the
	   desktop rem sizes would render BIGGER here. Re-spec to the phone scale. */
	.lroj-message { padding: 3.25rem var(--gutter) 3.75rem; }
	.lroj-message__mark { width: 3.5rem; height: 3.5rem; font-size: 1.4375rem; margin-bottom: 1.125rem; }
	.lroj-message__title { font-size: 1.75rem; margin-bottom: 0.75rem; }
	.lroj-message__lead { font-size: 1.0419rem; line-height: 1.5; margin-bottom: 1.5rem; }
	.lroj-message .lroj-btn { font-size: 1.0419rem; min-height: 2.6rem; padding: 0.55rem 1.25rem; }
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 900px) {
	.lroj-single__inner { grid-template-columns: 1fr; grid-template-rows: none; }
	.lroj-single__inner > .lroj-back { grid-column: auto; grid-row: auto; order: 0; }
	.lroj-single__inner > .lroj-aside { grid-column: auto; grid-row: auto; order: 2; }
	.lroj-single__inner > .lroj-detail { grid-column: auto; grid-row: auto; order: 1; }
}
@media (max-width: 768px) {
	/* The compact mobile header is ~64px, so clear it snugly (the desktop value over-pads on phones). */
	.lroj-board-page .lroj-hero { padding-top: 5.375rem; padding-bottom: 0.9375rem; }
	/* Mobile artboard (428): 26.4px content inset, title 22/700, controls 39.3 tall. */
	.lroj { --gutter: 1.65rem; }
	.lroj-hero__title { font-size: 1.375rem; letter-spacing: -0.005em; margin: 0 0 1.44rem; }  /* search box top lands at mock y133 */
	/* Mobile mockup shows two accent dots: one above the H1, one by the selects (not the 7 desktop dots). */
	.lroj-hero::before {
		background-image:
			radial-gradient(circle at 9% 17%, var(--red) 0 0.25rem, transparent 0.2812rem),
			radial-gradient(circle at 25% 66%, var(--red) 0 0.2188rem, transparent 0.25rem);
	}
	/* Rings run edge-to-edge on the mobile mockup; no left fade. */
	.lroj-hero::after { -webkit-mask-image: none; mask-image: none; }
	/* Compact ~36px controls + ~7px gaps so the hero band matches the mobile mockup's height/rhythm. */
	.lroj-filters { flex-direction: column; gap: 0.44rem; margin-top: 0.4875rem; }  /* mock pitch 46.4 */
	.lroj-select { flex: 0 0 auto; width: 100%; }
	/* 16px on the native select keeps iOS from zooming on focus (readable, tap-safe). */
	.lroj-select select { min-height: 2.456rem; padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 0.9581rem; }  /* mock: 39.3 box, 15.33 text (accepted: <16px zooms iOS on focus) */
	.lroj-hero__search-btn { display: flex; margin-top: 1.0625rem; min-height: 2.4875rem; padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 0.9581rem; background: #ed2126; }  /* mock: bright red 375x39.8, 17px above */
	.lroj-search__submit { display: none; }
	.lroj-search input { min-height: 2.456rem; font-size: 0.9169rem; padding-left: 2.2rem; }  /* mock: 39.3 box, 14.67 text */

	.lroj-board { padding-top: 2.4rem; }
	.lroj-board__head { margin-bottom: 0; }  /* mock: rows start right under the title */
	.lroj-list { margin-top: 0; }
	.lroj-row { padding-top: 0; }  /* mock: title-bottom -> row-1 title = ~14px */
	.lroj-board__title { font-family: var(--body); font-weight: 400; font-size: 1.5rem; letter-spacing: -0.005em; }  /* mock mobile: SS3 400 24px */
	.lroj-row { flex-direction: column; align-items: stretch; gap: 0.75rem; padding: 0.85rem 0; }
	.lroj-row__title { font-size: 1.1669rem; margin: 0 0 0.25rem; }  /* mock: 18.67 */
	.lroj-row__meta { grid-template-columns: 1fr 1fr; gap: 0.3rem 1rem; }
	/* Wrap instead of truncating so values stay readable at high zoom / narrow screens. */
	.lroj-meta-item { font-size: 0.9581rem; white-space: nowrap; }  /* mock: 15.33, values TRUNCATE with ellipsis (rows keep one height) */
	.lroj-meta-item:first-child { font-size: 0.9581rem; }
	.lroj-meta-item i { font-size: 0.7919rem; width: 1rem; }  /* mock: 12.67 */
	.lroj-row__cta { margin-right: 0; }
	.lroj-row__cta .lroj-btn { align-self: flex-start; font-size: 0.9581rem; min-height: 2.4875rem; padding: 0.5rem 1.18rem; }  /* mock pill 112x39.8 */

	.lroj-field-row { grid-template-columns: 1fr; }

	/* ---- After-search compact result cards (screen 04) ---------------- */
	.lroj-listing.is-searched .lroj-board__head,
	.lroj-listing.is-searched .lroj-chips { display: none; }
	.lroj-listing.is-searched .lroj-alertlink { display: inline-flex; }
	.lroj-listing.is-searched .lroj-board__alert { display: block; }
	.lroj-listing.is-searched .lroj-list { border-top: 0; }
	.lroj-listing.is-searched .lroj-row {
		position: relative; display: block; background: var(--card);
		border: 1px solid var(--line); border-radius: var(--r);
		padding: 1.25rem; margin: 0 0 0.875rem;
	}
	.lroj-listing.is-searched .lroj-row:hover,
	.lroj-listing.is-searched .lroj-row:active { border-color: var(--red); }
	/* The whole card is the tap target. */
	.lroj-listing.is-searched .lroj-row__title::after { content: ""; position: absolute; inset: 0; }
	.lroj-listing.is-searched .lroj-row__title { font-size: 1.125rem; margin: 0 0 0.75rem; }
	.lroj-listing.is-searched .lroj-row__cta,
	.lroj-listing.is-searched .lroj-meta-item--category,
	.lroj-listing.is-searched .lroj-meta-item--salary,
	.lroj-listing.is-searched .lroj-meta-item--date { display: none; }
	.lroj-listing.is-searched .lroj-row__meta { display: flex; gap: 0.375rem 2.75rem; }

	/* ---- Selected job: collapsed hero + white sheet (screen 05) ------- */
	.lroj-single-page .lroj-hero { padding-bottom: 1.25rem; }
	/* The search panel slides open from under the pull tab. */
	.lroj-single-page .lroj-hero__inner { overflow: hidden; max-height: 0; opacity: 0; visibility: hidden; transition: max-height 0.35s var(--ease), opacity 0.25s var(--ease), visibility 0s linear 0.35s; }
	.lroj-single-page.is-search-open .lroj-hero__inner { max-height: min(40rem, 82vh); opacity: 1; visibility: visible; transition-delay: 0s; overflow-y: auto; }
	.lroj-sheet-tab {
		display: flex; align-items: center; justify-content: center;
		width: 100%; min-height: 2.75rem; background: #fff; border: 0;
		border-bottom: 1px solid #e2e2e4;
		border-radius: 1rem 1rem 0 0; margin: -0.875rem 0 0; position: relative; z-index: 2;
		color: var(--muted); font-size: 1rem; cursor: pointer;
	}
	.lroj-sheet-tab i { transition: transform 0.2s var(--ease); }
	.lroj-single-page.is-search-open .lroj-sheet-tab i { transform: rotate(180deg); }
	.lroj-single-page .lroj-single { background: #fff; padding-top: 0; }
	/* Mobile single mock goes pull-tab -> breadcrumb -> title directly, with NO
	   "See All Jobs" back link (the breadcrumb carries the nav). Hide it here;
	   desktop keeps it. */
	.lroj-single__inner > .lroj-back { display: none; }
	.lroj-single-page .lroj-detail { border: 0; border-radius: 0; padding: 0.25rem 0 0.5rem; }

	/* Detail order per the mockup: crumb, title, facts, Apply Now, rule, prose. */
	.lroj-detail { display: flex; flex-direction: column; }
	.lroj-detail__top { display: contents; }
	.lroj-detail__crumb { order: 1; font-size: 0.875rem; margin: 0.375rem 0 0.375rem; }
	/* Mobile mock title is Chivo REGULAR (400), lighter than the desktop 500. */
	.lroj-detail__title { order: 2; font-size: 1.5rem; font-weight: 400; margin: 0 0 1.125rem; }
	/* Mock facts are compact: ~44px row pitch (was ~68 — the 24px line-height on
	   15px text + 16px row gap spread them ~2x too tall). */
	.lroj-facts { order: 3; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.25rem; }
	/* Everything under the title reads at 15px on mobile. */
	.lroj-fact__label { font-size: 0.9375rem; line-height: 1.2; margin: 0 0 0.13rem; }
	.lroj-fact__value { font-size: 0.9375rem; line-height: 1.28; }
	.lroj-detail__apply { order: 4; width: 100%; margin: 1.375rem 0 0; font-size: 0.9375rem; }
	.lroj-detail__rule { order: 5; }
	.lroj-prose { order: 6; font-size: 0.9375rem; }
	.lroj-prose p { margin: 0 0 1rem; }
	.lroj-mob-only { display: inline; }
	.lroj-desk-only { display: none; }

	/* ---- Full-screen apply sheet + thank-you (screens 08/09) ---------- */
	.lroj-modal.is-open { align-items: stretch; }
	.lroj-modal__panel { width: 100%; height: 100%; max-height: none; border-radius: 0; margin: 0; padding: 1.125rem var(--gutter) 2rem; }
	.lroj-modal__logo { display: block; height: 1.5rem; margin: 0.375rem 0 1.5rem; }
	.lroj-modal__logo .lro-logo { height: 100%; width: auto; }
	.lroj-modal__panel .lroj-form.is-done { display: flex; flex-direction: column; justify-content: center; min-height: calc(100% - 3.75rem); }
}
@media (max-width: 360px) {
	.lroj-row__meta { grid-template-columns: 1fr; }
}
/* =========================================================================
   Mobile restores for the 2026-07 single-page re-authoring above.
   The desktop rules were re-specced to the BSINGLE artboard (26px body etc.);
   these elements have no mobile artboard spec, so phones keep the sizes they
   shipped with (the mobile board artboard has its own compact scale).
   ========================================================================= */
@media (max-width: 768px) {
	.lroj-back { font-size: 0.875rem; }
	.lroj-relcard__title { font-size: 1.1669rem; }  /* mobile row-title size */
	.lroj-relcard__meta .lroj-meta-item { font-size: 0.875rem; }
	.lroj-page { min-width: 2.375rem; height: 2.375rem; font-size: 0.9375rem; }
	.lroj-alertcard__head { font-size: 1.4375rem; }
	.lroj-field > label, .lroj-field__label { font-size: 1.0625rem; }
	.lroj-detail__apply { font-size: 1.1875rem; padding: 0.75rem 2rem; }
	.lroj-prose { font-size: 1.0419rem; line-height: 1.28; }  /* mobile body: 16.67 like the theme's phone body */
	.lroj-prose h2, .lroj-prose h3 { font-size: 1.0419rem; }
}

@media (prefers-reduced-motion: reduce) {
	.lroj *, .lroj *::before, .lroj *::after { transition: none !important; animation: none !important; }
}