@charset "UTF-8";
/*-----------------------------------------------------------------------------------

	Theme Name: PeopleForward
	Description: Staffing & Recruitment Agency HTML Template
	Version: 1.0.0

	Conversion-led staffing brand for employers and job seekers: a confident primary colour does
	the work, an accent marks what is urgent or human, and job cards are drawn as perforated shift
	tickets. The two come from a colour scheme in assets/css/colors/, loaded after this file. The
	default scheme, blue and coral, is also written into the tokens below, so the theme keeps its
	colours without one.
	Built on Bootstrap 5.3.8: loaded after the stock bootstrap.min.css, it restyles Bootstrap through
	its --bs-* variables and keeps the file itself unedited, so it can be updated by replacing it.
	Mobile-first on Bootstrap's breakpoints (576, 768, 992 and 1200px); light-dark() tokens give the dark theme.
	Base (1–6), home page header to footer (7–18), inner pages (19–28), variants (29–36), the FAQ and style guide pages (37), overlays (38), header, footer and title variants (39), account, profile and content pages (40), the blog (41), about and contact variants (42), the agency dashboard (43), the candidate portal (44), motion (45).

	Table of Contents
	1. Fonts
	2. Tokens
	3. Base
	4. Layout
	5. Typography
	6. Controls
	7. Announcement & Header
	8. Hero
	9. Logos
	10. Entry Points
	11. Services
	12. Sectors
	13. Jobs (Shift Tickets)
	14. Results
	15. Team
	16. Insights
	17. Closing Conversion
	18. Footer
	19. Inner Pages — Shared Structure
	20. Shared Content Blocks
	21. People and Contact Cards
	22. Search, Filters and Listings
	23. Job Detail
	24. Forms
	25. Map and Branches
	26. Advice and Articles
	27. Company Pages
	28. Confirmation and Error States
	29. Layout Variants — Shared Pieces
	30. Home 2 — Job Board
	31. Home 3 — Employers
	32. Home 4 — Photo-Led
	33. Home 5 — Local Branches
	34. About 2
	35. Jobs — List and Map Views
	36. Job Detail — Banner and Summary Layouts
	37. Help and Style Guide Pages
	38. Overlays and Feedback
	39. Header, Footer and Title Variants
	40. Account, Profile and Content Pages
	41. Blog
	42. About and Contact Variants
	43. Agency Dashboard
	44. Candidate Portal
	45. Motion

-----------------------------------------------------------------------------------*/

/* ================================================================
	1. Fonts
================================================================ */

/* Self-hosted variable fonts (Latin subset): one file per family covers the whole
   weight range. The pages don't preload them: opened from disk (file://), Chrome
   blocks a font preload with a console error, while these rules load fine there. */
@font-face {
  font-family: "Red Hat Display";
  src: url("assets/fonts/red-hat-display-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Red Hat Text";
  src: url("assets/fonts/red-hat-text-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ================================================================
	2. Tokens
================================================================ */

/* ----------------------------------------------------------------
	Colour Scheme
---------------------------------------------------------------- */

/* Dark theme. Colour tokens that differ between themes hold both values in
   light-dark(), picked by color-scheme: the system setting by default, or the
   Light / Dark radios in the header (.theme-switch), read here with :has().
   assets/js/theme.js puts a remembered choice back as data-theme on <html>;
   once that attribute is set it decides, not the radios (a browser can
   restore an old radio state when the visitor goes Back). */
:root {
  color-scheme: light dark;
}

:root:not([data-theme]):has(#theme-light:checked),
:root[data-theme="light"] {
  color-scheme: light;
}

:root:not([data-theme]):has(#theme-dark:checked),
:root[data-theme="dark"] {
  color-scheme: dark;
}

/* ----------------------------------------------------------------
	Custom Properties
---------------------------------------------------------------- */

:root {
  /* Colour. --c-white is the page and card surface and --c-navy the heading ink,
     so both flip in the dark theme. Fills that carry white text use --c-primary-fill,
     --c-deep and --c-on-color instead, which stay the same in both.
     --c-primary is the text and link colour, lighter in the dark theme for contrast.
     The primary and accent tokens (and --c-tint, --c-map-edge and the glows) hold
     the default scheme, blue and coral; each file in assets/css/colors/ sets them again. */
  --c-white: light-dark(#ffffff, #10182b);
  --c-surface: light-dark(#f4f6fb, #0b1222);
  --c-tint: light-dark(#e9efff, #1a2650);
  --c-tint-fill: #e9efff;
  --c-primary: light-dark(#1f4be0, #8eaaff);
  --c-primary-fill: #1f4be0;
  --c-primary-hover: #173bbd;
  --c-navy: light-dark(#0c1838, #eef2fb);
  --c-deep: light-dark(#0c1838, #141f42);
  --c-navy-2: light-dark(#18264f, #1f2c57);
  --c-text: light-dark(#17213d, #dde3f0);
  --c-text-2: light-dark(#4a5470, #aeb8cf);
  --c-text-3: light-dark(#626b88, #8e98b2);
  --c-line: light-dark(#e1e6f0, #263254);
  --c-line-strong: light-dark(#c8d0e2, #36446c);
  /* Accent fills carry navy text (--c-deep): white on coral is under 3:1. */
  --c-accent: #ff6b4a;
  --c-accent-hover: #ff5a35;
  --c-accent-soft: light-dark(#ffe8e1, #3b211d);
  --c-accent-ink: light-dark(#b8341b, #ff9e88);
  --c-accent-light: #ffb8a6;
  --c-mint-soft: light-dark(#dcf5ea, #11362a);
  --c-mint-ink: light-dark(#12704b, #74dfb1);
  --c-sun-soft: light-dark(#fff1d1, #3b2e0e);
  --c-sun-ink: light-dark(#8a5a00, #f4c766);
  --c-map-edge: light-dark(#9fb3f5, #3b4f8f);
  /* Accent glows in the corner of the hero and page title backgrounds. */
  --c-glow: light-dark(rgb(255 232 225 / 0.7), rgb(255 107 74 / 0.1));
  --c-glow-soft: light-dark(rgb(255 232 225 / 0.55), rgb(255 107 74 / 0.08));
  --c-on-color: #ffffff;
  --c-on-dark-2: rgb(255 255 255 / 0.78);

  /* Typography */
  --font-display: "Red Hat Display", "Segoe UI", Roboto, Arial, sans-serif;
  --font-text: "Red Hat Text", "Segoe UI", Roboto, Arial, sans-serif;
  --fs-display: clamp(2.75rem, 1.5rem + 4vw, 4.75rem);
  --fs-h2: clamp(2rem, 1.45rem + 2.2vw, 3.375rem);
  --fs-h3: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;

  /* Space */
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: clamp(3rem, 2rem + 3vw, 5rem);
  --space-section: clamp(4.5rem, 3.25rem + 5vw, 8rem);
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  --grid-gap: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
  --container: 82rem;
  /* Header height, reused for anchor offsets and for sticky elements below it. */
  --header-h: 4.75rem;

  /* Shape & depth */
  --radius-s: 0.625rem;
  --radius-m: 0.875rem;
  --radius-l: 1.25rem;
  --radius-xl: 1.75rem;
  --shadow-card: 0 1.5rem 3rem -1.25rem light-dark(rgb(12 24 56 / 0.22), rgb(0 0 0 / 0.55));
  --shadow-float: 0 1.25rem 2.5rem -0.75rem light-dark(rgb(12 24 56 / 0.28), rgb(0 0 0 / 0.6)), 0 0.125rem 0.375rem light-dark(rgb(12 24 56 / 0.06), rgb(0 0 0 / 0.3));

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-base: 300ms;
  --dur-slow: 700ms;
}

/* ----------------------------------------------------------------
	Bootstrap Bridge
---------------------------------------------------------------- */

/* Bootstrap (assets/vendor/bootstrap) loads before this file and paints its
   components from these global --bs-* properties. Pointing them at the theme's
   tokens makes menus, form controls, cards and accordions follow the theme,
   light and dark, whether the page follows the system setting or the header
   switch. Bootstrap's own [data-bs-theme] values have the same specificity and
   load first, so these win in every state. The -rgb versions can't hold
   light-dark() and stay Bootstrap's; the theme doesn't use them. The one set
   here, --bs-primary-rgb, is for Bootstrap's own utilities (.text-primary,
   .bg-primary), and each colour scheme sets it again. */
:root {
  --bs-body-font-family: var(--font-text);
  --bs-body-font-size: var(--fs-body);
  --bs-body-line-height: 1.6;
  --bs-body-color: var(--c-text);
  --bs-body-bg: var(--c-white);
  --bs-emphasis-color: var(--c-navy);
  --bs-secondary-color: var(--c-text-2);
  --bs-secondary-bg: var(--c-surface);
  --bs-tertiary-color: var(--c-text-3);
  --bs-tertiary-bg: var(--c-surface);
  --bs-heading-color: inherit;
  --bs-link-color: var(--c-primary);
  --bs-link-hover-color: var(--c-primary);
  --bs-border-color: var(--c-line);
  --bs-border-radius: var(--radius-s);
  --bs-border-radius-lg: var(--radius-m);
  --bs-border-radius-xl: var(--radius-l);
  --bs-border-radius-xxl: var(--radius-xl);
  --bs-primary: var(--c-primary-fill);
  --bs-primary-rgb: 31, 75, 224;
  --bs-primary-text-emphasis: var(--c-primary);
  --bs-primary-bg-subtle: var(--c-tint);
  --bs-primary-border-subtle: var(--c-line-strong);
  --bs-focus-ring-color: var(--c-primary);
  --bs-code-color: var(--c-accent-ink);
  --bs-highlight-color: var(--c-navy);
  --bs-highlight-bg: var(--c-sun-soft);
}

/* Bootstrap draws a few marks as SVG images inside its CSS: the select arrow,
   checkbox and radio ticks, accordion chevrons and more. The theme keeps to
   Font Awesome and CSS, so the images Bootstrap would show on the components
   the theme uses are switched off here, and the theme draws its own marks.
   .navbar-toggler-icon, .btn-close, .form-switch, the carousel controls and
   the validation states are not used, so their images never load. */
.form-select,
.form-check-input {
  background-image: none;
}

/* Checkboxes stay native, tinted with accent-color, as before Bootstrap. */
.form-check-input {
  appearance: auto;
  accent-color: var(--c-primary);
}

.form-check-input:active {
  filter: none;
}

.accordion-button::after {
  content: none;
}

/* ----------------------------------------------------------------
	Fallback Without light-dark()
---------------------------------------------------------------- */

/* Browsers without light-dark() (Safari before 17.5, Chrome before 123, Firefox
   before 120) can't resolve the tokens above that use it, which would leave
   the page without colours. They get the light values here and stay in the
   light theme (the header switch hides itself there, see Theme Switch).
   Keep each value in step with the first one in its light-dark(). */
@supports not (color: light-dark(#000, #fff)) {
  :root {
    color-scheme: light;
    --c-white: #ffffff;
    --c-surface: #f4f6fb;
    --c-tint: #e9efff;
    --c-primary: #1f4be0;
    --c-navy: #0c1838;
    --c-deep: #0c1838;
    --c-navy-2: #18264f;
    --c-text: #17213d;
    --c-text-2: #4a5470;
    --c-text-3: #626b88;
    --c-line: #e1e6f0;
    --c-line-strong: #c8d0e2;
    --c-accent-soft: #ffe8e1;
    --c-accent-ink: #b8341b;
    --c-mint-soft: #dcf5ea;
    --c-mint-ink: #12704b;
    --c-sun-soft: #fff1d1;
    --c-sun-ink: #8a5a00;
    --c-map-edge: #9fb3f5;
    --c-glow: rgb(255 232 225 / 0.7);
    --c-glow-soft: rgb(255 232 225 / 0.55);
    --shadow-card: 0 1.5rem 3rem -1.25rem rgb(12 24 56 / 0.22);
    --shadow-float: 0 1.25rem 2.5rem -0.75rem rgb(12 24 56 / 0.28), 0 0.125rem 0.375rem rgb(12 24 56 / 0.06);
  }
}

/* ================================================================
	3. Base
================================================================ */

/* ----------------------------------------------------------------
	Reset
---------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* scroll-padding-top: anchor links stop below the sticky header, with room to spare. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-text);
  font: 400 var(--fs-body) / 1.6 var(--font-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ol,
ul,
fieldset {
  margin: 0;
}

/* Lists are components here; running text restores its markers. Element
   specificity is enough to beat Bootstrap's Reboot padding, and component
   classes still override it. An empty marker string rather than none counts
   as a visible marker in WebKit's list heuristic, so Safari can keep list
   semantics without an ARIA role. */
ol,
ul {
  padding: 0;
  list-style-type: "";
}

/* ----------------------------------------------------------------
	Reboot Adjustments
---------------------------------------------------------------- */

/* Bootstrap's Reboot (in bootstrap.min.css) restyles a few elements the theme
   leaves to the browser. revert hands them back to the browser's own defaults,
   as before Bootstrap; component classes below still style them as needed. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: revert;
  font-weight: revert;
  line-height: revert;
}

legend {
  float: revert;
  width: revert;
  margin-bottom: revert;
  padding: revert;
  font-size: revert;
  line-height: revert;
}

dt {
  font-weight: revert;
}

label {
  display: revert;
}

img {
  vertical-align: revert;
}

/* The parts of a date field, which Reboot packs tighter than the browser does. */
::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
  padding: revert;
}

/* ----------------------------------------------------------------
	Element Defaults
---------------------------------------------------------------- */

h1,
h2,
h3 {
  font-family: var(--font-display);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* ----------------------------------------------------------------
	Focus & Selection
---------------------------------------------------------------- */

/* The component selectors outrank Bootstrap's focus rules for buttons, nav
   links, the menu button, accordion buttons and checkboxes, which drop the
   outline for a box-shadow. Safari drops :focus-visible when an arrow key
   moves through a radio group, which would leave a keyboard user without a
   ring, so once the visitor has used Tab (functions.js marks <html>
   .is-tabbing) a focused radio shows it anyway: here, and on the theme
   switch, the choice chips and the demo's colour swatches. */
:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.navbar-toggler:focus-visible,
.accordion-button:focus-visible,
.form-check-input:focus-visible,
.is-tabbing .form-check-input[type="radio"]:focus {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
}

.nav-link:focus-visible,
.navbar-toggler:focus,
.accordion-button:focus,
.form-check-input:focus {
  box-shadow: none;
}

/* White ring on the results band (primary fill) and the navy footer, where the usual ring would vanish. */
.results :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--c-on-color);
}

::selection {
  background: var(--c-primary-fill);
  color: var(--c-on-color);
}

/* ----------------------------------------------------------------
	Accessibility Helpers
---------------------------------------------------------------- */

/* .visually-hidden comes from Bootstrap. */
.skip-link {
  position: absolute;
  inset-inline-start: var(--gutter);
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-s);
  background: var(--c-primary-fill);
  color: var(--c-on-color);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus-visible {
  top: 1rem;
}

/* ----------------------------------------------------------------
	Icons
---------------------------------------------------------------- */

/* Icons are Font Awesome Free glyphs (<i class="icon fa-…">) centred in a square
   box, so every icon takes the same space. A context resizes them with --icon.
   Load this file after Font Awesome's all.min.css: .icon and the Font Awesome
   style classes have equal specificity, so the later file wins. */
.icon {
  --icon: 1.25rem;
  flex: none;
  display: inline-block;
  align-content: center;
  width: var(--icon);
  height: var(--icon);
  font-size: calc(var(--icon) * 0.7);
  line-height: 1;
  text-align: center;
}

/* The glyph is an inline block, which a link's underline skips, so the
   underline of a flex or grid link never runs under its icon. */
.icon::before {
  display: inline-block;
}

.icon--sm {
  --icon: 1rem;
}

/* ----------------------------------------------------------------
	Stretched Link
---------------------------------------------------------------- */

/* Cards use Bootstrap's .stretched-link on their title link: its ::after (z-index 1)
   covers the nearest positioned ancestor, so the whole card is clickable. Controls
   inside the card (save buttons, phone links) are lifted above it with
   position: relative and z-index: 2. */

/* ================================================================
	4. Layout
================================================================ */

/* ----------------------------------------------------------------
	Container & Section
---------------------------------------------------------------- */

/* Bootstrap's .container, sized to the theme: an 82rem column with the fluid
   --gutter left free on either side at every width. This one rule replaces
   Bootstrap's max-width per breakpoint and its padding; the gutter is margin,
   so the half-gutter overhang of a .row inside always has room. */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}

.section {
  padding-block: var(--space-section);
}

/* ----------------------------------------------------------------
	Section Head
---------------------------------------------------------------- */

.section-head {
  display: grid;
  gap: var(--space-s);
  margin-bottom: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem);
}

.section-head--center {
  justify-items: center;
  text-align: center;
}

.section-head__text {
  max-width: 38rem;
  color: var(--c-text-2);
  font-size: var(--fs-lead);
}

.section-head .btn {
  justify-self: start;
}

/* Desktop: the --action variant puts its button to the right of the heading. */
@media (min-width: 992px) {
  .section-head--action {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .section-head--action > :first-child {
    display: grid;
    gap: var(--space-s);
  }
}

/* ----------------------------------------------------------------
	Card Grids
---------------------------------------------------------------- */

/* Card grids are Bootstrap rows: row-cols-* in the markup sets the columns at
   each breakpoint, every card sits inside its column (which carries the
   gutter), and the theme's fluid gap is the gutter. */
.jobs__grid,
.job-list,
.sectors__grid,
.services__grid,
.values,
.insights__grid,
.team-cards,
.branch-grid,
.employer-grid,
.case-cards,
.quote-grid,
.quote-split,
.sector-tiles,
.steps,
.promises,
.accred-grid,
.closing__grid,
.results__quotes,
.next-links,
.reviews__list,
.entry__grid {
  --bs-gutter-x: var(--grid-gap);
  --bs-gutter-y: var(--grid-gap);
}

/* Taller gaps between the rows of people and of footer columns. */
.team__grid,
.site-footer__grid {
  --bs-gutter-x: var(--grid-gap);
  --bs-gutter-y: var(--space-xl);
}

/* Form fields stack below 576px, so there is no side gutter there: half of it
   would only push a narrow form wider. */
.form-grid {
  --bs-gutter-x: 0;
  --bs-gutter-y: var(--space-s);
}

@media (min-width: 576px) {
  .form-grid {
    --bs-gutter-x: var(--space-s);
  }
}

.case__grid {
  --bs-gutter-x: var(--space-m);
  --bs-gutter-y: var(--space-m);
}

/* ----------------------------------------------------------------
	Page Layouts
---------------------------------------------------------------- */

/* Two-column page layouts, heroes and bands are Bootstrap rows too: the columns
   stack on phones and sit side by side from 992px. A fixed sidebar is
   col-lg-auto with its width here; shared rows split by flex-grow in the old fr
   proportions. Below 992px the columns are stacked, so there is no side gutter:
   half of a wide one would reach past the page's own side margin. */
.layout,
.split,
.media-text,
.service-row,
.map-split,
.map-strip,
.page-hero__inner,
.hero-board__inner,
.hero-b2b__inner,
.hero-local__inner,
.reviews {
  --bs-gutter-x: 0;
  --bs-gutter-y: var(--space-xl);
}

.hero__layout,
.hero-collage__inner,
.app-promo {
  --bs-gutter-x: 0;
  --bs-gutter-y: var(--space-2xl);
}

.newsletter-band {
  --bs-gutter-x: var(--space-l);
  --bs-gutter-y: var(--space-l);
}

@media (min-width: 992px) {
  .layout,
  .split,
  .media-text,
  .service-row,
  .page-hero__inner,
  .hero-b2b__inner,
  .hero-collage__inner,
  .app-promo {
    --bs-gutter-x: var(--space-2xl);
  }

  .map-split,
  .map-strip,
  .hero-board__inner,
  .hero-local__inner,
  .reviews {
    --bs-gutter-x: var(--space-xl);
  }

  .hero__layout {
    --bs-gutter-x: var(--grid-gap);
  }

  .layout--filters > .layout__aside,
  .layout--legal > .layout__aside {
    width: calc(17.5rem + var(--bs-gutter-x));
  }

  .reviews > .reviews__side {
    width: calc(20rem + var(--bs-gutter-x));
  }

  .layout--job > .layout__aside,
  .layout--article > .layout__aside,
  .layout--form > .layout__aside {
    width: calc(22rem + var(--bs-gutter-x));
  }

  .layout--summary > .layout__aside {
    width: calc(21rem + var(--bs-gutter-x));
  }

  .hero-board__inner > .hero-board__content {
    flex-grow: 1.3;
  }

  .hero-board__inner > .hero-board__side {
    flex-grow: 0.7;
  }

  .layout--map > .layout__main,
  .map-strip > .map-strip__body,
  .split > .split__main,
  .hero-b2b__inner > .hero-b2b__content {
    flex-grow: 1.2;
  }

  .layout--map > .layout__aside,
  .map-strip > .map-strip__map,
  .split > .split__side,
  .hero-b2b__inner > .hero-b2b__side {
    flex-grow: 0.8;
  }

  .page-hero__inner > .page-hero__content,
  .app-promo > .app-promo__body {
    flex-grow: 1.1;
  }

  .page-hero__inner > .page-hero__side,
  .app-promo > .app-promo__side {
    flex-grow: 0.9;
  }

  .hero-local__inner > .hero-local__content {
    flex-grow: 1.05;
  }

  .hero-local__inner > .hero-local__side {
    flex-grow: 0.95;
  }
}

/* Theme cards build on Bootstrap's .card but draw their own border, background
   and spacing (each in its own section), so Bootstrap's card defaults step aside
   for them. :where() keeps this at one class of specificity, so the components'
   own rules still win; a plain .card keeps Bootstrap's look. */
.card:where(.article, .alert-card, .branch-card, .service, .value, .ticket, .contact-card, .side-panel, .apply-card, .summary-card) {
  --bs-card-border-width: 0;
  --bs-card-bg: transparent;
  color: inherit;
}

/* ================================================================
	5. Typography
================================================================ */

/* ----------------------------------------------------------------
	Headings
---------------------------------------------------------------- */

/* .t-display is the largest title (homepage heroes, About 2, the job banner);
   other pages use .t-h1 (19. Inner Pages). */
.t-display {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--c-navy);
}

.t-h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--c-navy);
}

.t-h3 {
  font-size: var(--fs-h3);
  font-weight: 750;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

/* ----------------------------------------------------------------
	Kicker
---------------------------------------------------------------- */

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-primary);
  font: 700 var(--fs-sm) / 1.3 var(--font-display);
}

/* The logo's forward chevron, drawn with clip-path; .results and .mission reuse
   the same polygon as large watermarks. */
.kicker::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  background: currentColor;
  clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%);
}

.kicker--light {
  color: var(--c-accent-light);
}

/* ================================================================
	6. Controls
================================================================ */

/* ----------------------------------------------------------------
	Buttons
---------------------------------------------------------------- */

/* Bootstrap's .btn, set up through its --bs-btn-* properties. The variants
   below only set colours; the focus ring comes from 3. Base. Bootstrap stops a
   button's text being selected; here it can be, so the phone numbers on the call
   buttons can be copied, as before. */
.btn {
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: 0;
  --bs-btn-font-family: var(--font-display);
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 700;
  --bs-btn-line-height: 1;
  --bs-btn-border-width: 1.5px;
  --bs-btn-border-radius: var(--radius-m);
  --bs-btn-focus-box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3.25rem;
  white-space: nowrap;
  user-select: auto;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.btn:hover {
  transform: translateY(-1px);
}

/* Below 360px a label too long for its column wraps, instead of pushing the page
   sideways. */
@media (max-width: 359.98px) {
  .btn {
    white-space: normal;
  }
}

/* Bootstrap paints a focused button in its hover colours; keyboard focus here
   shows only the ring, as everywhere else. */
.btn:focus-visible:not(:hover) {
  border-color: var(--bs-btn-border-color);
  background-color: var(--bs-btn-bg);
  color: var(--bs-btn-color);
}

.btn .icon {
  transition: transform var(--dur-base) var(--ease-out);
}

/* A trailing icon (the arrow after a label) nudges forward on hover; a leading one stays. */
.btn:hover .icon:last-child:not(:first-child) {
  transform: translateX(0.1875rem);
}

/* Each variant sets Bootstrap's colour properties for rest, hover and pressed. */
.btn-primary {
  --bs-btn-color: var(--c-on-color);
  --bs-btn-bg: var(--c-primary-fill);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--c-on-color);
  --bs-btn-hover-bg: var(--c-primary-hover);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--c-on-color);
  --bs-btn-active-bg: var(--c-primary-hover);
  --bs-btn-active-border-color: transparent;
}

.btn-primary:hover {
  box-shadow: 0 0.75rem 1.5rem -0.75rem color-mix(in srgb, var(--c-primary-fill) 70%, transparent);
}

/* The accent button is the theme's own variant, built the same way. */
.btn-accent {
  --bs-btn-color: var(--c-deep);
  --bs-btn-bg: var(--c-accent);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--c-deep);
  --bs-btn-hover-bg: var(--c-accent-hover);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--c-deep);
  --bs-btn-active-bg: var(--c-accent-hover);
  --bs-btn-active-border-color: transparent;
}

.btn-accent:hover {
  box-shadow: 0 0.75rem 1.5rem -0.75rem color-mix(in srgb, var(--c-accent) 70%, transparent);
}

/* The neutral outline: navy text on a grey line, primary on hover. */
.btn-outline-secondary {
  --bs-btn-color: var(--c-navy);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--c-line-strong);
  --bs-btn-hover-color: var(--c-primary);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--c-primary);
  --bs-btn-active-color: var(--c-primary);
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: var(--c-primary);
}

/* White on navy, the primary fill or photos in both themes. The hover tint is
   --c-tint-fill, which stays pale: --c-tint turns dark in the dark theme. */
.btn-light {
  --bs-btn-color: var(--c-deep);
  --bs-btn-bg: var(--c-on-color);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--c-deep);
  --bs-btn-hover-bg: var(--c-tint-fill);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--c-deep);
  --bs-btn-active-bg: var(--c-tint-fill);
  --bs-btn-active-border-color: transparent;
}

.btn-dark {
  --bs-btn-color: var(--c-on-color);
  --bs-btn-bg: var(--c-deep);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--c-on-color);
  --bs-btn-hover-bg: var(--c-navy-2);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--c-on-color);
  --bs-btn-active-bg: var(--c-navy-2);
  --bs-btn-active-border-color: transparent;
}

/* For dark bands and photos. Fixed white: --c-white is the page surface and
   turns dark navy in the dark theme. */
.btn-outline-light {
  --bs-btn-color: var(--c-on-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgb(255 255 255 / 0.4);
  --bs-btn-hover-color: var(--c-on-color);
  --bs-btn-hover-bg: rgb(255 255 255 / 0.08);
  --bs-btn-hover-border-color: var(--c-on-color);
  --bs-btn-active-color: var(--c-on-color);
  --bs-btn-active-bg: rgb(255 255 255 / 0.08);
  --bs-btn-active-border-color: var(--c-on-color);
}

.btn-sm {
  --bs-btn-padding-x: 1.125rem;
  --bs-btn-padding-y: 0;
  --bs-btn-font-size: var(--fs-sm);
  --bs-btn-border-radius: var(--radius-m);
  min-height: 2.75rem;
}

/* ----------------------------------------------------------------
	Badges
---------------------------------------------------------------- */

/* Bootstrap's .badge as the theme's small pill; .rounded-pill makes it round.
   .text-bg-new and .text-bg-urgent are the theme's two tints, written like
   Bootstrap's own .text-bg-* helpers. */
.badge {
  --bs-badge-padding-x: 0.625rem;
  --bs-badge-padding-y: 0.25rem;
  --bs-badge-font-size: var(--fs-xs);
  --bs-badge-font-weight: 700;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  line-height: 1.2;
}

.text-bg-new {
  background-color: var(--c-tint) !important;
  color: var(--c-primary) !important;
}

.text-bg-urgent {
  background-color: var(--c-accent-soft) !important;
  color: var(--c-accent-ink) !important;
}

/* ================================================================
	7. Announcement & Header
================================================================ */

/* ----------------------------------------------------------------
	Announcement Bar
---------------------------------------------------------------- */

.announce {
  background: var(--c-primary-fill);
  color: var(--c-on-color);
  font-size: var(--fs-sm);
}

.announce__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 1rem;
  padding-block: 0.625rem;
  text-align: center;
}

.announce__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 700;
}

/* ----------------------------------------------------------------
	Site Header
---------------------------------------------------------------- */

/* Sticky. Stacking order across the site: skip link 100, demo switcher 60,
   header 50, job apply bar 40, job section nav 10. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-white);
}

/* Bootstrap's navbar without its own padding; the inner row keeps the theme's
   height and spacing, and never wraps. display: block keeps the container's auto
   margins rounding as on every other container (Bootstrap makes .navbar flex).
   The logo keeps its navy on hover and focus, where Bootstrap would switch to
   its own emphasis colour (black, or white in its dark mode). */
.site-header .navbar {
  display: block;
  --bs-navbar-padding-x: 0;
  --bs-navbar-padding-y: 0;
  --bs-navbar-nav-link-padding-x: 0;
  --bs-navbar-brand-padding-y: 0;
  --bs-navbar-brand-margin-end: 0;
  --bs-navbar-brand-font-size: var(--fs-body);
  --bs-navbar-brand-color: var(--c-navy);
  --bs-navbar-brand-hover-color: var(--c-navy);
}

.site-header__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-h);
}

/* ----------------------------------------------------------------
	Logo
---------------------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--c-navy);
  text-decoration: none;
}

.brand__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.625rem;
  background: var(--c-primary-fill);
  color: var(--c-on-color);
  font-size: 0.9375rem;
}

/* The accent dot. Its border takes the surface colour behind the logo, and
   .brand--light switches it to navy for the footer. */
.brand__mark::after {
  content: "";
  position: absolute;
  top: -0.25rem;
  inset-inline-end: -0.25rem;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--c-white);
  border-radius: 50%;
  background: var(--c-accent);
}

.brand__name {
  font: 800 1.375rem / 1 var(--font-display);
  letter-spacing: -0.03em;
}

.brand__name span {
  color: var(--c-primary);
}

.brand--light {
  color: var(--c-on-color);
}

.brand--light .brand__mark::after {
  border-color: var(--c-deep);
}

.brand--light .brand__name span {
  color: var(--c-accent-light);
}

/* ----------------------------------------------------------------
	Primary Navigation
---------------------------------------------------------------- */

/* Bootstrap's .navbar-nav, shown from 992px (d-none d-lg-block on the nav).
   list-style-type "" keeps the list for Safari's screen reader, as in 3. Base. */
.site-nav .navbar-nav {
  gap: clamp(1rem, 2vw, 2.25rem);
  list-style-type: "";
}

/* 992px to 1199px: the navigation needs all the room there is, or its links
   break onto two lines. Upload CV waits until 1200px (it is in the Find a job
   menu too), and the gaps grow from 1rem at 992px to their usual 1.5rem at
   1200px. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .site-header__inner,
  .site-nav .navbar-nav {
    gap: clamp(1rem, 3.85vw - 1.385rem, 1.5rem);
  }
}

/* A menu item is its link plus the chevron button, side by side. */
.site-nav .dropdown {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.site-nav .nav-link {
  display: inline-flex;
  align-items: center;
  padding-block: 0.5rem;
  color: var(--c-navy);
  font: 650 var(--fs-sm) / 1.2 var(--font-display);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

/* The chevron: Bootstrap's dropdown toggle, drawn as a bare icon in the link's colour. */
.nav-toggle {
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-navy);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}

/* Link and chevron take the primary colour together. */
.site-nav .nav-link:hover,
.site-nav .nav-link:hover + .nav-toggle,
.site-nav .nav-toggle:hover,
.site-nav .dropdown:has(> .nav-toggle:hover) > .nav-link,
.site-nav .dropdown:focus-within > .nav-link,
.site-nav .dropdown:focus-within > .nav-toggle {
  color: var(--c-primary);
}

/* ----------------------------------------------------------------
	Dropdown Panel
---------------------------------------------------------------- */

/* Bootstrap's .dropdown-menu as a transparent frame; its top padding bridges the
   gap under the link so the pointer can reach the panel. A panel shows on hover
   and while its link has keyboard focus, unless one is open through Bootstrap
   (.show): that one is then the only panel. The chevron button opens it from the
   keyboard (Enter, Space or the down arrow) and Esc closes it. visibility keeps a
   closed panel's links out of the tab order. */
.site-nav .nav__menu {
  --bs-dropdown-padding-x: 0;
  --bs-dropdown-padding-y: 0;
  --bs-dropdown-border-width: 0;
  --bs-dropdown-bg: transparent;
  --bs-dropdown-min-width: 0;
  --bs-dropdown-link-color: var(--c-text);
  --bs-dropdown-link-hover-color: var(--c-text);
  --bs-dropdown-link-hover-bg: var(--c-surface);
  --bs-dropdown-link-active-color: var(--c-text);
  --bs-dropdown-link-active-bg: var(--c-surface);
  display: block;
  top: 100%;
  inset-inline-start: -1rem;
  margin: 0;
  padding-top: 1rem;
  opacity: 0;
  visibility: hidden;
  translate: 0 0.5rem;
  transition:
    opacity var(--dur-base) var(--ease-out),
    translate var(--dur-base) var(--ease-out),
    visibility var(--dur-base);
}

.site-nav .navbar-nav:not(:has(.nav__menu.show)) .dropdown:hover > .nav__menu,
.site-nav .navbar-nav:not(:has(.nav__menu.show)) .dropdown:has(> .nav-link:focus-visible) > .nav__menu,
.site-nav .nav__menu:focus-within,
.site-nav .nav__menu.show {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

/* Keyboard focus on a menu link shows the ring alone, as before; Bootstrap paints
   the hover look on :focus too. */
.site-nav .dropdown-item:focus:not(:hover) {
  color: var(--bs-dropdown-link-color);
  background-color: transparent;
}

.nav__panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  width: 34rem;
  padding: 0.75rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  background: var(--c-white);
  box-shadow: var(--shadow-float);
}

.nav__panel a {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem;
  border-radius: var(--radius-m);
  white-space: normal;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.nav__panel a:hover {
  background: var(--c-surface);
}

.nav__panel .icon {
  margin-top: 0.125rem;
  color: var(--c-primary);
}

.nav__panel a > span {
  display: grid;
  gap: 0.125rem;
}

.nav__panel strong {
  font: 700 var(--fs-sm) var(--font-display);
}

.nav__panel strong + span {
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

/* Five links or fewer (Home) stand in one column. */
.nav__panel--single {
  grid-template-columns: 1fr;
  width: 21rem;
}

/* 992px to 1199px: two-column panels are a little narrower, so the one under
   Hire talent stays inside the window at 992px. */
@media (max-width: 1199.98px) {
  .nav__panel:not(.nav__panel--single) {
    width: 32rem;
  }
}

/* ----------------------------------------------------------------
	Header Actions
---------------------------------------------------------------- */

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header-actions__link {
  align-items: center;
  gap: 0.5rem;
  color: var(--c-navy);
  font: 650 var(--fs-sm) var(--font-display);
  text-decoration: none;
}

.header-actions__link:hover {
  color: var(--c-primary);
}

/* Sign in (from 1200px): an icon button paired with the theme switch, 0.5rem
   from it, which also leaves the navigation its room at 1200px. */
.header-actions__icon {
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-inline-start: -0.75rem;
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--radius-s);
  color: var(--c-navy);
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.header-actions__icon:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

/* ----------------------------------------------------------------
	Theme Switch
---------------------------------------------------------------- */

/* Light / dark: two radios read by :has() on :root (see 2. Tokens), drawn in
   CSS as one shape that changes with the theme: a small sun by day, a crescent
   moon at night. Switching eclipses the sun into the crescent as its rays drift
   away, and back again. Both labels cover the button and the one that switches
   away from the current theme lies on top, so a click anywhere flips it. With
   neither radio checked the page follows the system. assets/js/functions.js
   stores the choice and theme.js puts it back on the next page, as data-theme
   on <html>. */
.theme-switch {
  /* 0 by day (the light theme), 1 at night (the dark theme); set further down. */
  --night: 0;
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--radius-s);
  color: var(--c-navy);
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.theme-switch:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.theme-switch:has(:focus-visible),
.is-tabbing .theme-switch:has(:focus) {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
}

/* Both labels fill the button; the one that switches away from the current
   theme lies on top, so it takes the click. */
.theme-switch label {
  grid-area: 1 / 1;
  place-self: stretch;
  cursor: pointer;
}

.theme-switch label[for="theme-light"] {
  z-index: var(--night);
}

.theme-switch label[for="theme-dark"] {
  z-index: calc(1 - var(--night));
}

/* The rays (::before) and the disc (::after), drawn with box-shadows in the
   text colour, so they follow hover and the transparent header. They change
   size and place through the shadows rather than transforms, which keeps such
   small shapes sharp while they move. Forced colours (high contrast) mode would
   drop the shadows, so the two opt out of it. */
.theme-switch::before,
.theme-switch::after {
  content: "";
  grid-area: 1 / 1;
  border-radius: 50%;
  pointer-events: none;
  forced-color-adjust: none;
}

/* Eight dots round the disc, --ray from its middle. At night they drift out
   and fade; by day they come back a moment after the disc has shrunk. */
.theme-switch::before {
  --ray: calc(0.5rem + var(--night) * 0.25rem);
  --ray-d: calc(var(--ray) * 0.7071);
  width: 0.15625rem;
  height: 0.15625rem;
  box-shadow:
    0 calc(-1 * var(--ray)) currentColor,
    var(--ray-d) calc(-1 * var(--ray-d)) currentColor,
    var(--ray) 0 currentColor,
    var(--ray-d) var(--ray-d) currentColor,
    0 var(--ray) currentColor,
    calc(-1 * var(--ray-d)) var(--ray-d) currentColor,
    calc(-1 * var(--ray)) 0 currentColor,
    calc(-1 * var(--ray-d)) calc(-1 * var(--ray-d)) currentColor;
  opacity: calc(1 - var(--night));
  transition:
    box-shadow 400ms var(--ease-out),
    opacity 250ms var(--ease-out);
  transition-delay: calc((1 - var(--night)) * 250ms);
}

/* The disc is its inset shadow, and the shadow's offset is a second disc that
   bites into it. By day the disc is small and the bite sits clear of it
   (0.625rem, -0.625rem), so the sun is solid; at night the disc grows and the
   bite slides in to (0.3125rem, -0.1875rem), leaving a crescent. */
.theme-switch::after {
  --morph: 600ms cubic-bezier(0.65, 0, 0.35, 1);
  width: calc(0.5rem + var(--night) * 0.4375rem);
  height: calc(0.5rem + var(--night) * 0.4375rem);
  box-shadow: inset calc(0.625rem - var(--night) * 0.3125rem) calc(var(--night) * 0.4375rem - 0.625rem) 0 currentColor;
  transition:
    width var(--morph),
    height var(--morph),
    box-shadow var(--morph);
}

/* Night: dark is picked or remembered. data-theme (a remembered choice) wins;
   the radios count only without it. */
:root:not([data-theme]):has(#theme-dark:checked) .theme-switch,
:root[data-theme="dark"] .theme-switch {
  --night: 1;
}

/* Night too when the system is dark and nothing is picked yet... */
@media (prefers-color-scheme: dark) {
  .theme-switch {
    --night: 1;
  }
}

/* ...unless light is picked or remembered (these outrank the rule above). */
:root:not([data-theme]):has(#theme-light:checked) .theme-switch,
:root[data-theme="light"] .theme-switch {
  --night: 0;
}

/* Without light-dark() the colours stay light whatever is picked (see the
   fallback in 2. Tokens), so the switch would do nothing: hide it. */
@supports not (color: light-dark(#000, #fff)) {
  .theme-switch {
    display: none;
  }
}

/* ----------------------------------------------------------------
	Menu Toggle
---------------------------------------------------------------- */

/* Opens the mobile menu (as Bootstrap's .navbar-toggler, which hides it from
   992px); the close button inside the menu uses the same class. */
.menu-toggle {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--radius-s);
  background: var(--c-white);
  color: var(--c-navy);
  cursor: pointer;
}

/* Large phones and up: wider spacing once the Request staff button joins the
   header (d-sm-inline-flex). */
@media (min-width: 576px) {
  .header-actions {
    gap: 1.25rem;
  }
}

/* 1200px to 1399px: a little less, as the Sign in button (from 1200px) would
   otherwise push the navigation onto two lines. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .header-actions {
    gap: 1rem;
  }

  .header-actions__icon {
    margin-inline-start: -0.5rem;
  }
}

/* ----------------------------------------------------------------
	Mobile Menu
---------------------------------------------------------------- */

/* Bootstrap's offcanvas as a full-screen panel. It opens at once, as the old menu
   did (Bootstrap would slide it in), and Bootstrap handles Esc, focus and the page
   scroll lock; the whole panel scrolls when the list is taller than the screen. */
.mobile-menu {
  --bs-offcanvas-transition: none;
  --bs-offcanvas-width: 100%;
  --bs-offcanvas-padding-x: 0;
  --bs-offcanvas-padding-y: 0;
  --bs-offcanvas-border-width: 0;
  --bs-offcanvas-bg: var(--c-white);
  --bs-offcanvas-color: var(--c-text);
  padding: 0 var(--gutter) var(--space-l);
  overflow-y: auto;
}

.mobile-menu__body {
  display: flex;
  flex-direction: column;
  overflow-y: visible;
}

.mobile-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  border-bottom: 1px solid var(--c-line);
}

.mobile-menu__list {
  padding-block: var(--space-m);
}

/* A section: its name opens the main page; the chevron (Bootstrap's collapse,
   opening at once) lists the rest underneath, grouped as in the header. */
.mobile-menu__list > li {
  border-bottom: 1px solid var(--c-line);
}

.mobile-menu__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.mobile-menu__row > a {
  flex: 1;
  padding-block: 1rem;
  color: var(--c-navy);
  font: 750 1.5rem / 1.2 var(--font-display);
  letter-spacing: -0.02em;
  text-decoration: none;
}

.mobile-menu__toggle {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1.5px solid var(--c-line-strong);
  border-radius: 50%;
  background: none;
  color: var(--c-primary);
  cursor: pointer;
}

.mobile-menu__toggle[aria-expanded="true"] .icon {
  rotate: 180deg;
}

.mobile-menu__sub {
  padding-bottom: var(--space-s);
}

.mobile-menu__sub.collapsing {
  transition: none;
}

.mobile-menu__sub a {
  display: block;
  padding-block: 0.5rem;
  color: var(--c-text);
  font: 600 1.0625rem / 1.3 var(--font-display);
  text-decoration: none;
}

.mobile-menu__sub a:hover {
  color: var(--c-primary);
}

.mobile-menu__group {
  margin-top: var(--space-s);
  color: var(--c-text-3);
  font: 700 var(--fs-xs) var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mobile-menu__foot {
  display: grid;
  gap: 0.75rem;
  margin-top: auto;
}

.mobile-menu__phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  color: var(--c-navy);
  font-weight: 700;
}

/* ================================================================
	8. Hero
================================================================ */

/* ----------------------------------------------------------------
	Hero Layout
---------------------------------------------------------------- */

/* overflow-x: clip, not hidden: the floating cards can't cause sideways scrolling,
   and the hero doesn't become a scroll container. */
.hero {
  overflow-x: clip;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3rem, 2rem + 4vw, 5.5rem);
  background:
    radial-gradient(55% 60% at 88% 18%, var(--c-tint), transparent 70%),
    radial-gradient(40% 40% at 0% 100%, var(--c-glow), transparent 70%),
    var(--c-white);
}

.hero__layout {
  align-items: center;
}

/* ----------------------------------------------------------------
	Hero Badge
---------------------------------------------------------------- */

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.4375rem 0.875rem 0.4375rem 0.625rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-white);
  color: var(--c-navy);
  font: 650 var(--fs-sm) / 1.2 var(--font-display);
  box-shadow: 0 0.25rem 0.75rem rgb(12 24 56 / 0.05);
}

.hero-badge__stars {
  display: inline-flex;
  color: var(--c-accent);
}

/* ----------------------------------------------------------------
	Title & Brush Mark
---------------------------------------------------------------- */

/* isolation keeps the brush stroke (.title-mark::after, z-index: -1) behind the words
   but in front of the hero background. */
.hero__title {
  position: relative;
  isolation: isolate;
  margin-top: var(--space-m);
}

/* The highlighted phrase; nowrap keeps it on one line so the stroke isn't split. */
.title-mark {
  position: relative;
  white-space: nowrap;
}

/* A brush-stroke arc: only the top border is drawn, so it tapers at both ends. */
.title-mark::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -2% -0.17em;
  height: 0.32em;
  border-top: 0.13em solid var(--c-accent);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  rotate: -1.5deg;
}

.hero__lead {
  max-width: 34rem;
  margin-top: var(--space-m);
  color: var(--c-text-2);
  font-size: var(--fs-lead);
}

/* ----------------------------------------------------------------
	Find a Job / Hire Talent Switch
---------------------------------------------------------------- */

/* Bootstrap pills (.nav-pills) switch between two tab panes, each a form and
   its hint; the arrow keys move between the tabs. */
.switch {
  max-width: 40rem;
  margin-top: var(--space-l);
  padding: 0.5rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

.switch__tabs {
  --bs-nav-link-padding-x: 1rem;
  --bs-nav-link-padding-y: 0.625rem;
  --bs-nav-link-hover-color: var(--c-text-2);
  --bs-nav-pills-border-radius: var(--radius-s);
  --bs-nav-pills-link-active-color: var(--c-primary);
  --bs-nav-pills-link-active-bg: var(--c-white);
  display: inline-flex;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
  padding: 0.25rem;
  border-radius: var(--radius-m);
  background: var(--c-surface);
  list-style-type: "";
}

.switch__tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-text-2);
  font: 700 var(--fs-sm) / 1 var(--font-display);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.switch__tabs .nav-link.active {
  box-shadow: 0 0.125rem 0.5rem rgb(12 24 56 / 0.1);
}

.switch__tabs .nav-link:focus-visible {
  outline-offset: 2px;
}

.switch__panel {
  display: grid;
  gap: 0.5rem;
}

/* Search field: label and input in one tinted box, shared by every search bar.
   The focus ring is drawn on the box (:focus-within), so the input drops its own. */
.field {
  display: grid;
  gap: 0.125rem;
  padding: 0.625rem 1rem;
  border-radius: var(--radius-m);
  background: var(--c-surface);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}

.field:focus-within {
  box-shadow: inset 0 0 0 2px var(--c-primary);
}

.field label {
  color: var(--c-text-3);
  font: 700 var(--fs-xs) / 1.3 var(--font-display);
}

.field input {
  min-width: 0;
  min-height: 1.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-navy);
  font-size: 1rem;
  font-weight: 500;
}

.field input::placeholder {
  color: #8b93ab;
}

.field input:focus-visible {
  outline: none;
}

/* Bootstrap paints a focused .form-control and .form-select; inside a .field the
   box draws the focus ring instead (:focus-within above). */
.field .form-control:focus,
.field .form-control:focus-visible,
.field .form-select:focus,
.field .form-select:focus-visible {
  background-color: transparent;
  color: var(--c-navy);
  box-shadow: none;
}

.switch__panel .btn {
  min-height: 3.5rem;
}

.switch__hint {
  padding: 0.75rem 0.5rem 0.25rem;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.switch__hint a {
  color: var(--c-navy);
  font-weight: 600;
}

.switch__hint strong {
  color: var(--c-primary);
}

/* ----------------------------------------------------------------
	Trust Row
---------------------------------------------------------------- */

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: var(--space-l);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.hero__trust strong {
  color: var(--c-navy);
}

.faces {
  display: flex;
}

.faces img {
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--c-white);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 20%;
}

.faces img + img {
  margin-inline-start: -0.625rem;
}

/* ----------------------------------------------------------------
	Hero Visual
---------------------------------------------------------------- */

/* Every layer inside is absolutely positioned in percentages, so the aspect ratio
   is what gives the box its height. */
.hero__visual {
  position: relative;
  width: min(100%, 34rem);
  aspect-ratio: 1 / 1.08;
  margin-inline: auto;
}

/* The dotted stage: a radial-gradient dot grid over the primary fill;
   ::before is the accent circle top right, ::after a faint one bottom left. */
.stage {
  position: absolute;
  inset: 15% 3% 0 9%;
  overflow: hidden;
  border-radius: 2rem;
  background:
    radial-gradient(rgb(255 255 255 / 0.2) 1.5px, transparent 1.7px) 0 0 / 1.375rem 1.375rem,
    var(--c-primary-fill);
}

.stage::before {
  content: "";
  position: absolute;
  top: -14%;
  inset-inline-end: -12%;
  width: 48%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-accent);
}

.stage::after {
  content: "";
  position: absolute;
  bottom: -32%;
  inset-inline-start: -18%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.08);
}

.hero__person {
  position: absolute;
  z-index: 1;
  inset: 0 2% 0 10%;
  width: 88%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
}

/* ----------------------------------------------------------------
	Floating Cards
---------------------------------------------------------------- */

/* A smaller job ticket; --ticket-pad keeps its notches on the card edge (13. Jobs). */
.hero .ticket--float {
  --ticket-pad: 1rem;
  position: absolute;
  z-index: 2;
  bottom: 12%;
  inset-inline-start: 0;
  width: min(14.5rem, 52%);
  gap: 0.375rem;
  box-shadow: var(--shadow-float);
}

.ticket--float .ticket__title {
  font-size: 1.0625rem;
}

.ticket--float .ticket__pay {
  font-size: 1.25rem;
}

.hero__placed {
  position: absolute;
  z-index: 2;
  top: 28%;
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem 0.75rem 0.75rem;
  border-radius: var(--radius-l);
  background: var(--c-white);
  box-shadow: var(--shadow-float);
  color: var(--c-text-2);
  font-size: var(--fs-xs);
  line-height: 1.35;
}

.hero__placed strong {
  color: var(--c-navy);
  font: 800 var(--fs-sm) var(--font-display);
}

.hero__placed-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-m);
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
}

/* Desktop only (shown from 992px). */
.hero__rating {
  position: absolute;
  z-index: 2;
  display: none;
  bottom: 5%;
  inset-inline-end: 4%;
  padding: 0.875rem 1rem;
  border-radius: var(--radius-l);
  background: var(--c-white);
  box-shadow: var(--shadow-float);
  color: var(--c-text-2);
  font-size: var(--fs-xs);
  line-height: 1.3;
}

.hero__rating strong {
  color: var(--c-navy);
  font: 800 1.5rem / 1.1 var(--font-display);
  letter-spacing: -0.02em;
}

.hero__bars {
  display: flex;
  align-items: flex-end;
  gap: 0.25rem;
  height: 1.75rem;
  margin-top: 0.5rem;
}

.hero__bars i {
  flex: 1;
  border-radius: 0.1875rem;
  background: var(--c-tint);
}

/* A static mini bar chart; the last bar is the highlight. */
.hero__bars i:nth-child(1) { height: 35%; }
.hero__bars i:nth-child(2) { height: 50%; }
.hero__bars i:nth-child(3) { height: 45%; }
.hero__bars i:nth-child(4) { height: 70%; }
.hero__bars i:nth-child(5) { height: 85%; }
.hero__bars i:nth-child(6) { height: 100%; background: var(--c-primary-fill); }

/* ----------------------------------------------------------------
	Doodles
---------------------------------------------------------------- */

/* Decorative Font Awesome glyphs around the stage; the markup hides them from screen readers. */
.doodle {
  position: absolute;
  z-index: 2;
}

.doodle--arrow {
  top: 4%;
  inset-inline-start: 6%;
  color: var(--c-accent);
  font-size: clamp(2rem, 1.2rem + 2.2vw, 3rem);
  rotate: -14deg;
}

.doodle--spark {
  top: 6%;
  inset-inline-end: 6%;
  color: var(--c-accent);
  font-size: 1.75rem;
}

.doodle--spark-sm {
  top: 48%;
  inset-inline-start: 2%;
  color: var(--c-primary);
  font-size: 1rem;
}

/* Tablet and up: the switch's fields and button on one row. */
@media (min-width: 768px) {
  .switch__panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) auto;
  }
}

/* Desktop: copy on 7 of 12 columns and the visual on the rest; the cards
   hang past the visual's edges. */
@media (min-width: 992px) {
  .hero__visual {
    width: 100%;
  }

  .hero .ticket--float {
    inset-inline-start: -10%;
  }

  .hero__rating {
    display: grid;
  }

  .hero__placed {
    inset-inline-end: -6%;
  }
}

/* ================================================================
	9. Logos
================================================================ */

.logos {
  padding-block: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  background: var(--c-surface);
}

.logos__inner {
  display: grid;
  gap: var(--space-m);
  align-items: center;
}

.logos__title {
  color: var(--c-navy);
  font: 750 1.0625rem / 1.35 var(--font-display);
}

.logos__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m) var(--space-s);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-text-3);
  font: 800 1.0625rem / 1 var(--font-display);
  letter-spacing: -0.02em;
  white-space: nowrap;
  transition: color var(--dur-base) var(--ease-out);
}

/* Below 360px a long name wraps under itself, instead of pushing the page sideways. */
@media (max-width: 359.98px) {
  .logo {
    white-space: normal;
  }
}

.logo:hover {
  color: var(--c-navy);
}

.logo i {
  font-size: 1.25rem;
}

@media (min-width: 768px) {
  .logos__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Wide screens: the title beside one row of six logos, from 1280px. This is the
   one breakpoint off Bootstrap's scale: below it the six names don't fit beside
   the title and would push the page sideways. */
@media (min-width: 1280px) {
  .logos__inner {
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: var(--space-xl);
  }

  .logos__list {
    grid-template-columns: repeat(6, auto);
    justify-content: space-between;
  }
}

/* ================================================================
	10. Entry Points
================================================================ */

/* ----------------------------------------------------------------
	Entry Cards
---------------------------------------------------------------- */

.entry-card {
  display: grid;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.entry-card--employer {
  background: var(--c-deep);
  color: var(--c-on-color);
}

.entry-card--seeker {
  background: var(--c-tint);
  color: var(--c-navy);
}

.entry-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}

.entry-card__label {
  padding: 0.3125rem 0.75rem;
  border-radius: 999px;
  font: 700 var(--fs-xs) / 1.2 var(--font-display);
}

.entry-card--employer .entry-card__label {
  background: rgb(255 255 255 / 0.12);
  color: var(--c-accent-light);
}

.entry-card--seeker .entry-card__label {
  background: var(--c-white);
  color: var(--c-primary);
}

/* ----------------------------------------------------------------
	Check List
---------------------------------------------------------------- */

/* Ticked list used across the site; contexts recolour the tick (accent on navy). */
.checks {
  display: grid;
  gap: 0.75rem;
}

.checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-weight: 500;
}

.entry-card--employer .checks li {
  color: var(--c-on-dark-2);
}

.checks__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.0625rem;
  border-radius: 50%;
  background: var(--c-primary-fill);
  color: var(--c-on-color);
}

.entry-card--employer .checks__icon {
  background: var(--c-accent);
  color: var(--c-deep);
}

/* ----------------------------------------------------------------
	Card Actions & Media
---------------------------------------------------------------- */

.entry-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-m);
  margin-top: auto;
  padding-top: var(--space-xs);
}

.entry-card__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: 700 var(--fs-sm) var(--font-display);
  text-decoration: none;
}

.entry-card__phone:hover {
  text-decoration: underline;
}

.entry-card__media {
  min-height: 16rem;
}

.entry-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.entry-card:hover .entry-card__media img {
  transform: scale(1.04);
}

/* Tablet and up: the photo sits beside the text, inset in the card. */
@media (min-width: 768px) {
  .entry-card {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }

  .entry-card__media {
    min-height: 100%;
    padding: 0.75rem 0.75rem 0.75rem 0;
  }

  .entry-card__media img {
    border-radius: var(--radius-l);
  }
}

/* ================================================================
	11. Services
================================================================ */

.services {
  background: var(--c-surface);
}

/* Service card. Its icon tile and arrow link (.service__icon, .service__link) are
   reused by value cards, sector tiles and case studies. */
.service {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  background: var(--c-white);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.service:hover {
  border-color: transparent;
  box-shadow: var(--shadow-card);
  transform: translateY(-0.375rem);
}

.service__icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 0.5rem;
  border-radius: var(--radius-m);
  background: var(--c-tint);
  color: var(--c-primary);
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.service:hover .service__icon {
  background: var(--c-primary-fill);
  color: var(--c-on-color);
}

.service__title {
  font: 750 1.25rem / 1.25 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--c-navy);
}

.service p {
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.service__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.5rem;
  color: var(--c-primary);
  font: 700 var(--fs-sm) var(--font-display);
  text-decoration: none;
}

.service__link .icon {
  transition: transform var(--dur-base) var(--ease-out);
}

.service__link:hover .icon {
  transform: translateX(0.1875rem);
}

/* ================================================================
	12. Sectors
================================================================ */

/* Photo card: isolation keeps the photo (z-index: -2) and the gradient (-1) inside
   the card, under the text. The title link is stretched over the whole card. */
.sector {
  position: relative;
  isolation: isolate;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--c-deep);
}

.sector img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.sector::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgb(12 24 56 / 0) 40%, rgb(12 24 56 / 0.82));
}

.sector:hover img {
  transform: scale(1.06);
}

.sector__body {
  position: absolute;
  inset: auto 0 0;
  padding: var(--space-m);
  color: var(--c-on-color);
}

.sector__title {
  font: 750 1.375rem / 1.2 var(--font-display);
  letter-spacing: -0.02em;
}

.sector__title a {
  text-decoration: none;
}

.sector__body p {
  margin-top: 0.25rem;
  color: var(--c-on-dark-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.sector__go {
  position: absolute;
  top: var(--space-s);
  inset-inline-end: var(--space-s);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-navy);
  transition:
    background-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.sector:hover .sector__go {
  background: var(--c-accent);
  transform: rotate(-45deg);
}

/* ================================================================
	13. Jobs (Shift Tickets)
================================================================ */

/* ----------------------------------------------------------------
	Filter Chips
---------------------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--space-l);
}

.filter {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 1rem;
  border: 1.5px solid var(--c-line);
  border-radius: 999px;
  color: var(--c-text-2);
  font: 700 var(--fs-sm) var(--font-display);
  text-decoration: none;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.filter:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.filter--active,
.filter--active:hover {
  border-color: var(--c-primary);
  background: var(--c-primary-fill);
  color: var(--c-on-color);
}

/* ----------------------------------------------------------------
	Job Ticket
---------------------------------------------------------------- */

/* --ticket-pad is the padding and also places the notches (.ticket__foot), so
   change the variable rather than padding. */
.ticket {
  --ticket-pad: 1.5rem;
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: var(--ticket-pad);
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  background: var(--c-white);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.jobs__grid .ticket {
  height: 100%;
}

.jobs__grid .ticket:hover {
  border-color: transparent;
  box-shadow: var(--shadow-card);
  transform: translateY(-0.25rem);
}

.ticket__top {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.25rem;
}

/* Letter mark standing in for an employer logo, in four colourways. Also used in
   job rows, job headers and employer cards. */
.org-mark {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-m);
  font: 800 1.125rem var(--font-display);
}

.org-mark--primary { background: var(--c-tint); color: var(--c-primary); }
.org-mark--accent { background: var(--c-accent-soft); color: var(--c-accent-ink); }
.org-mark--navy { background: var(--c-deep); color: var(--c-on-color); }
.org-mark--mint { background: var(--c-mint-soft); color: var(--c-mint-ink); }

.ticket__title {
  color: var(--c-navy);
  font: 750 1.25rem / 1.25 var(--font-display);
  letter-spacing: -0.015em;
}

.ticket__title a {
  text-decoration: none;
}

.ticket__title a:hover {
  color: var(--c-primary);
}

.ticket__org {
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.ticket__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}

.ticket__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.25rem;
}

.ticket__tags li {
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  background: var(--c-surface);
  color: var(--c-text-2);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* The dashed rule and two half-circle notches turn the card into a shift
   ticket. Each notch is centred on the card's edge and .ticket's overflow
   clips its outer half, so the tickets work on any section background. */
.ticket__foot {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.75rem;
  padding-top: 1rem;
  border-top: 2px dashed var(--c-line);
}

.ticket__foot::before,
.ticket__foot::after {
  content: "";
  position: absolute;
  top: -0.6875rem;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-white);
}

.ticket__foot::before {
  inset-inline-start: calc(-1 * var(--ticket-pad) - 0.6875rem);
}

.ticket__foot::after {
  inset-inline-end: calc(-1 * var(--ticket-pad) - 0.6875rem);
}

.ticket__pay {
  color: var(--c-navy);
  font: 800 1.5rem / 1 var(--font-display);
  letter-spacing: -0.02em;
}

.ticket__pay span {
  color: var(--c-text-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0;
}

.ticket__posted {
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

/* ----------------------------------------------------------------
	CV Banner
---------------------------------------------------------------- */

.cv-banner {
  display: grid;
  gap: var(--space-m);
  align-items: center;
  margin-top: var(--space-l);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border-radius: var(--radius-l);
  background: var(--c-tint);
}

.cv-banner__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--c-primary-fill);
  color: var(--c-on-color);
}

.cv-banner__title {
  color: var(--c-navy);
  font: 800 1.375rem / 1.2 var(--font-display);
}

.cv-banner p {
  margin-top: 0.25rem;
  color: var(--c-text-2);
}

.cv-banner .btn {
  justify-self: start;
}

/* Tablet and up: the CV banner on one row. */
@media (min-width: 768px) {
  .cv-banner {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
}

/* ================================================================
	14. Results
================================================================ */

/* ----------------------------------------------------------------
	Results Band
---------------------------------------------------------------- */

.results {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--c-primary-fill);
  color: var(--c-on-color);
}

/* Two oversized logo chevrons as a faint watermark (the .kicker::before polygon). */
.results::before,
.results::after {
  content: "";
  position: absolute;
  z-index: -1;
  aspect-ratio: 1;
  background: rgb(255 255 255 / 0.06);
  clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%);
}

.results::before {
  top: -8rem;
  inset-inline-end: -6rem;
  width: 34rem;
}

.results::after {
  bottom: -10rem;
  inset-inline-start: -8rem;
  width: 26rem;
}

.results .t-h2 {
  color: var(--c-on-color);
}

/* ----------------------------------------------------------------
	Figures
---------------------------------------------------------------- */

.results__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl) var(--grid-gap);
}

/* column-reverse puts the figure (dd) above its label (dt) while the markup keeps
   the dt-then-dd order a description list needs. .stat-row, .hero-board__stats,
   .big-stats and .numbers use the same flip. */
.result {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-inline-start: var(--space-m);
  border-inline-start: 2px solid rgb(255 255 255 / 0.22);
}

.result dd {
  font: 800 clamp(2.75rem, 2rem + 2.8vw, 4.5rem) / 1 var(--font-display);
  letter-spacing: -0.04em;
}

.result dd span {
  margin-inline-start: 0.125rem;
  color: var(--c-accent-light);
  font-size: 0.5em;
  letter-spacing: -0.02em;
}

.result dt {
  max-width: 16rem;
  color: var(--c-on-dark-2);
  font-size: var(--fs-sm);
}

/* ----------------------------------------------------------------
	Testimonials
---------------------------------------------------------------- */

/* A Bootstrap row with its own top margin, so the vertical gutter is a row-gap:
   Bootstrap's negative top margin would merge with the space above. */
.results__quotes {
  --bs-gutter-y: 0;
  row-gap: var(--grid-gap);
  margin-top: var(--space-2xl);
}

/* Testimonial card; on light sections it adds .quote--light (20. Shared Content Blocks). */
.quote {
  display: grid;
  align-content: space-between;
  gap: var(--space-m);
  padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  border-radius: var(--radius-xl);
  background: var(--c-white);
  color: var(--c-text);
}

.quote__stars {
  display: inline-flex;
  gap: 0.125rem;
  color: var(--c-accent);
}

.quote blockquote {
  margin: 0;
  color: var(--c-navy);
  font: 600 clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem) / 1.5 var(--font-display);
}

.quote figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem;
}

.quote figcaption img {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  object-fit: cover;
}

/* Name and role: the block after the photo. */
.quote figcaption > span:nth-child(2) {
  display: grid;
  color: var(--c-text-3);
  font-size: var(--fs-sm);
  line-height: 1.35;
}

.quote figcaption strong {
  color: var(--c-navy);
  font-family: var(--font-display);
}

.quote__tag {
  margin-inline-start: auto;
  padding: 0.3125rem 0.75rem;
  border-radius: 999px;
  background: var(--c-tint);
  color: var(--c-primary);
  font: 700 var(--fs-xs) var(--font-display);
}

.quote__tag--accent {
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
}

/* Desktop: four figures in a row, two quotes side by side. */
@media (min-width: 992px) {
  .results__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ----------------------------------------------------------------
	Testimonial Slider
---------------------------------------------------------------- */

/* Home 1's quotes in the shared scroller (29. Layout Variants — Shared Pieces),
   with its arrows and dots below. */
.results__slider {
  margin-top: var(--space-2xl);
}

/* One card with the next peeking in on phones and tablets, two whole cards from
   992px. The scrollbar thumb and focus ring turn white on the band's primary fill. */
.results__slider .scroller {
  grid-auto-columns: min(36rem, 88%);
  scrollbar-color: var(--c-on-color) rgb(255 255 255 / 0.2);
}

.results__slider .scroller:focus-visible {
  outline-color: var(--c-on-color);
}

/* Once the script shows the arrows, the scrollbar is only clutter. */
.results__slider:has(.scroller-nav:not([hidden])) .scroller {
  scrollbar-width: none;
}

@media (min-width: 992px) {
  .results__slider .scroller {
    grid-auto-columns: calc((100% - var(--grid-gap)) / 2);
  }
}

/* ================================================================
	15. Team
================================================================ */

/* ----------------------------------------------------------------
	Consultant Cards
---------------------------------------------------------------- */

.consultant {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.25rem;
}

.consultant__photo {
  aspect-ratio: 4 / 5;
  margin-bottom: 0.75rem;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.consultant__photo--primary { background: var(--c-tint); }
.consultant__photo--accent { background: var(--c-accent-soft); }
.consultant__photo--mint { background: var(--c-mint-soft); }
.consultant__photo--sun { background: var(--c-sun-soft); }

.consultant__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
  transition: transform var(--dur-slow) var(--ease-out);
}

.consultant:hover .consultant__photo img {
  transform: scale(1.04);
}

/* Availability badge over the photo. The dot takes the text colour: green when
   available, amber with --busy. */
.consultant__status {
  position: absolute;
  top: 0.75rem;
  inset-inline-start: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.625rem;
  border-radius: 999px;
  background: var(--c-white);
  color: var(--c-mint-ink);
  font: 700 var(--fs-xs) / 1.2 var(--font-display);
  box-shadow: 0 0.25rem 0.75rem rgb(12 24 56 / 0.1);
}

.consultant__status::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

.consultant__status--busy {
  color: var(--c-sun-ink);
}

.consultant__name {
  color: var(--c-navy);
  font: 750 1.25rem / 1.25 var(--font-display);
  letter-spacing: -0.015em;
}

.consultant__role {
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.consultant__contact {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.consultant__contact a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  color: var(--c-navy);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.consultant__contact a:hover {
  border-color: var(--c-primary);
  background: var(--c-primary-fill);
  color: var(--c-on-color);
}

/* ----------------------------------------------------------------
	Branch Links
---------------------------------------------------------------- */

.branches {
  display: grid;
  gap: var(--space-s);
  margin-top: var(--space-2xl);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--radius-l);
  background: var(--c-surface);
}

.branches__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-navy);
  font: 800 1rem var(--font-display);
}

.branches__label .icon {
  color: var(--c-accent);
}

.branches__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.branches__list a {
  display: inline-flex;
  padding: 0.4375rem 0.875rem;
  border-radius: 999px;
  background: var(--c-white);
  color: var(--c-text-2);
  font: 650 var(--fs-sm) var(--font-display);
  text-decoration: none;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.branches__list a:hover {
  background: var(--c-primary-fill);
  color: var(--c-on-color);
}

/* Desktop: four consultants in a row; the branch label sits beside its links. */
@media (min-width: 992px) {
  .branches {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-l);
  }
}

/* ================================================================
	16. Insights
================================================================ */

.insights {
  background: var(--c-surface);
}

/* Article card; the same card and grid list posts on the advice pages. */
.article {
  position: relative;
  display: grid;
  align-content: start;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--c-white);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.article:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-0.25rem);
}

.article__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.article__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.article:hover .article__media img {
  transform: scale(1.05);
}

.article__body {
  display: grid;
  gap: 0.625rem;
  padding: var(--space-m);
}

.article__cat {
  color: var(--c-primary);
  font: 700 var(--fs-xs) / 1.2 var(--font-display);
}

.article__cat--accent {
  color: var(--c-accent-ink);
}

.article__title {
  color: var(--c-navy);
  font: 750 1.25rem / 1.3 var(--font-display);
  letter-spacing: -0.015em;
}

.article__title a {
  text-decoration: none;
}

.article:hover .article__title a {
  color: var(--c-primary);
}

.article__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

/* ================================================================
	17. Closing Conversion
================================================================ */

/* Split call to action for both audiences, closing most pages. */
.closing {
  padding-block: var(--space-section);
}

.closing__card {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: start;
  align-content: start;
  gap: var(--space-s);
  padding: clamp(1.75rem, 1.25rem + 2.5vw, 3.5rem);
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.closing__card--seeker {
  background: var(--c-deep);
  color: var(--c-on-color);
}

.closing__card--employer {
  background: var(--c-accent);
  color: var(--c-deep);
}

.closing__title {
  max-width: 14ch;
  font: 800 clamp(1.875rem, 1.4rem + 2vw, 2.75rem) / 1.08 var(--font-display);
  letter-spacing: -0.03em;
}

.closing__card p {
  max-width: 30rem;
  font-size: var(--fs-lead);
}

.closing__card--seeker p {
  color: var(--c-on-dark-2);
}

.closing__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: var(--space-s);
}

.closing__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: 800 1.0625rem var(--font-display);
  text-decoration: none;
}

.closing__phone:hover {
  text-decoration: underline;
}

/* The logo's forward chevron, three times over, as a faint watermark. */
.closing__chevrons {
  position: absolute;
  z-index: -1;
  bottom: -0.75rem;
  inset-inline-end: 0.25rem;
  display: flex;
  gap: 0.12em;
  font-size: clamp(3.5rem, 2.5rem + 2.5vw, 5.25rem);
  line-height: 1;
  opacity: 0.16;
}

/* Undoes Font Awesome 7's fixed 1.25em icon width, so the chevrons sit close. */
.closing__chevrons i {
  width: auto;
}

/* ================================================================
	18. Footer
================================================================ */

/* ----------------------------------------------------------------
	Footer Grid
---------------------------------------------------------------- */

.site-footer {
  padding-top: var(--space-2xl);
  background: var(--c-deep);
  color: var(--c-on-dark-2);
}

.site-footer__grid {
  padding-bottom: var(--space-2xl);
}

/* From 992px all five columns share one row (col-lg); the about column and the
   job alerts take a larger share than the three link lists. */
@media (min-width: 992px) {
  .site-footer__brand {
    flex-grow: 1.5;
  }

  .site-footer .alerts {
    flex-grow: 1.4;
  }
}

/* ----------------------------------------------------------------
	Brand & Contact
---------------------------------------------------------------- */

.site-footer__brand > p {
  max-width: 24rem;
  margin-top: var(--space-s);
}

.site-footer__contact {
  display: grid;
  gap: 0.5rem;
  margin-top: var(--space-m);
}

.site-footer__contact li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.site-footer__contact .icon {
  color: var(--c-accent-light);
}

.site-footer__contact a {
  color: var(--c-on-color);
  font-weight: 600;
  text-decoration: none;
}

.site-footer__contact a:hover {
  text-decoration: underline;
}

/* ----------------------------------------------------------------
	Link Columns
---------------------------------------------------------------- */

.site-footer__heading {
  margin-bottom: var(--space-s);
  color: var(--c-on-color);
  font: 750 1rem var(--font-display);
}

.site-footer nav li + li {
  margin-top: 0.5rem;
}

.site-footer nav a {
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.site-footer nav a:hover {
  color: var(--c-on-color);
}

/* ----------------------------------------------------------------
	Job Alerts
---------------------------------------------------------------- */

.alerts {
  display: grid;
  align-content: start;
  gap: 0.75rem;
}

.alerts .site-footer__heading {
  margin-bottom: 0;
}

/* No block padding: the min-height sets the height, as it did before the field
   took Bootstrap's .form-control padding. */
.alerts input {
  min-height: 3.25rem;
  padding-block: 0;
  padding-inline: 1rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-m);
  background: var(--c-white);
  color: var(--c-navy);
  font-size: inherit;
}

.alerts input:focus-visible {
  border-color: var(--c-accent);
  outline: none;
  box-shadow: none;
}

/* The browser's own placeholder colour, as before the field became a .form-control. */
.alerts input::placeholder {
  color: revert;
}

/* ----------------------------------------------------------------
	Bottom Bar
---------------------------------------------------------------- */

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-l);
  padding-block: var(--space-l);
  border-top: 1px solid rgb(255 255 255 / 0.14);
  font-size: var(--fs-xs);
}

.site-footer__legal,
.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.site-footer__legal a {
  text-decoration: none;
}

.site-footer__legal a:hover {
  color: var(--c-on-color);
  text-decoration: underline;
}

.site-footer__social {
  gap: 0.5rem;
  margin-inline-start: auto;
}

.site-footer__social a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.08);
  color: var(--c-on-color);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.site-footer__social a:hover {
  background: var(--c-primary-fill);
}

/* ================================================================
	19. Inner Pages — Shared Structure
================================================================ */

/* ----------------------------------------------------------------
	Shared Modifiers
---------------------------------------------------------------- */

.container--narrow {
  width: min(100% - 2 * var(--gutter), 52rem);
}

.section--surface {
  background: var(--c-surface);
}

.section--tight {
  padding-block: clamp(2.75rem, 2.25rem + 2.5vw, 4.5rem);
}

/* Inner-page title, a step below .t-display. */
.t-h1 {
  font-size: clamp(2.25rem, 1.6rem + 2.7vw, 3.75rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.032em;
  color: var(--c-navy);
}

/* Current section in the primary navigation: link and chevron in the primary colour, the
   whole item underlined with an inset shadow. */
.site-nav .nav-link[aria-current],
.site-nav .nav-link[aria-current] + .nav-toggle {
  color: var(--c-primary);
}

.site-nav .nav-item:has(> .nav-link[aria-current]) {
  box-shadow: inset 0 -2px 0 var(--c-primary);
}

/* ----------------------------------------------------------------
	Breadcrumb
---------------------------------------------------------------- */

/* Bootstrap's breadcrumb in the theme's type and colours. The separator is
   Bootstrap's own "/" (--bs-breadcrumb-divider); the gap spaces the items. */
.breadcrumb {
  --bs-breadcrumb-margin-bottom: 0;
  --bs-breadcrumb-font-size: var(--fs-sm);
  --bs-breadcrumb-item-padding-x: 0;
  --bs-breadcrumb-divider-color: var(--c-line-strong);
  --bs-breadcrumb-item-active-color: var(--c-navy);
  align-items: center;
  gap: 0.25rem 0.5rem;
  color: var(--c-text-3);
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.breadcrumb a {
  color: var(--c-text-2);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--c-primary);
  text-decoration: underline;
}

.breadcrumb-item.active {
  font-weight: 600;
}

/* ----------------------------------------------------------------
	Page Hero
---------------------------------------------------------------- */

/* Inner-page title area. Modifiers: --media and --branch add a photo or map column
   on desktop, --search holds a search bar, --compact trims the bottom padding. */
.page-hero {
  overflow-x: clip;
  padding-block: clamp(1.75rem, 1.25rem + 2.5vw, 3.5rem) clamp(2.75rem, 2rem + 3vw, 4.5rem);
  border-bottom: 1px solid var(--c-line);
  background:
    radial-gradient(45% 80% at 95% 0%, var(--c-tint), transparent 70%),
    radial-gradient(30% 50% at 0% 100%, var(--c-glow-soft), transparent 70%),
    var(--c-white);
}

.page-hero__inner {
  align-items: center;
}

.page-hero__content {
  display: grid;
  justify-items: start;
  gap: var(--space-s);
  min-width: 0;
}

.page-hero__content .breadcrumb {
  margin-bottom: var(--space-xs);
}

.page-hero__lead {
  max-width: 42rem;
  color: var(--c-text-2);
  font-size: var(--fs-lead);
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--space-xs);
}

.page-hero__media {
  position: relative;
  isolation: isolate;
  margin-inline: var(--space-s);
}

/* Accent block offset behind the photo; the media's side margins leave room for it. */
.page-hero__media::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  border-radius: var(--radius-xl);
  background: var(--c-accent-soft);
}

.page-hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-xl);
}

.page-hero--compact {
  padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.page-hero--search .search-bar {
  margin-top: var(--space-s);
}

/* "Last updated" line on the legal pages. */
.updated {
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}

/* Desktop: the photo or map sits beside the title. */
@media (min-width: 992px) {
  .page-hero__media {
    margin-inline: 0 1.25rem;
  }
}

/* ----------------------------------------------------------------
	Page Layouts
---------------------------------------------------------------- */

/* Main column plus sidebar from 992px. --filters and --legal put a 17.5rem sidebar
   on the left, --job, --article and --form a 22rem one on the right, and --map
   splits the branch map and list. Sidebars are sticky below the header. */
.layout {
  align-items: start;
}

.layout__main {
  min-width: 0;
}

@media (min-width: 992px) {
  .layout__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--space-m));
    display: grid;
    gap: var(--space-m);
  }
}

/* ----------------------------------------------------------------
	Split
---------------------------------------------------------------- */

.split {
  align-items: start;
}

.split__main {
  display: grid;
  justify-items: start;
  gap: var(--space-s);
}

.split__label {
  margin-top: var(--space-s);
  color: var(--c-navy);
  font: 750 1rem var(--font-display);
}

/* ================================================================
	20. Shared Content Blocks
================================================================ */

/* ----------------------------------------------------------------
	Stat Row
---------------------------------------------------------------- */

/* As many 11rem tiles as fit; min() stops a tile overflowing very narrow screens.
   Figure above label, as in .result (14. Results). */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--grid-gap);
}

.stat-row > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 0.375rem;
  padding: var(--space-m);
  border-radius: var(--radius-l);
  background: var(--c-surface);
}

.section--surface .stat-row > div {
  background: var(--c-white);
}

.stat-row dd {
  color: var(--c-primary);
  font: 800 clamp(1.875rem, 1.5rem + 1.4vw, 2.625rem) / 1 var(--font-display);
  letter-spacing: -0.03em;
}

.stat-row dt {
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

/* ----------------------------------------------------------------
	Chip List
---------------------------------------------------------------- */

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip-list span,
.chip-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.5rem 0.9375rem;
  border: 1.5px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-white);
  color: var(--c-navy);
  font: 650 var(--fs-sm) / 1.2 var(--font-display);
  text-decoration: none;
}

.chip-list .icon {
  color: var(--c-primary);
}

.chip-list a {
  transition:
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.chip-list a:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

/* ----------------------------------------------------------------
	Check List Variants
---------------------------------------------------------------- */

.checks--light li {
  color: var(--c-text);
}

.checks--grid {
  gap: 0.875rem 2rem;
}

@media (min-width: 768px) {
  .checks--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ----------------------------------------------------------------
	Value Cards
---------------------------------------------------------------- */

.value {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  padding: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  background: var(--c-white);
}

.value--tint {
  border-color: transparent;
  background: var(--c-tint);
}

.value h3,
.value__title {
  color: var(--c-navy);
  font: 750 1.25rem / 1.25 var(--font-display);
  letter-spacing: -0.015em;
}

.value p {
  color: var(--c-text-2);
}

.value a:not(.service__link) {
  color: var(--c-navy);
  font-weight: 600;
}

.value .service__icon {
  margin-bottom: 0.25rem;
}

/* ----------------------------------------------------------------
	Steps
---------------------------------------------------------------- */

.step {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--space-l) var(--space-m) var(--space-m);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  background: var(--c-white);
}

.step__num {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.5rem;
  border-radius: var(--radius-m);
  background: var(--c-primary-fill);
  color: var(--c-on-color);
  font: 800 1.125rem var(--font-display);
}

.steps > li:nth-child(even) .step__num {
  background: var(--c-accent);
  color: var(--c-deep);
}

.step__title {
  color: var(--c-navy);
  font: 750 1.1875rem / 1.25 var(--font-display);
}

.step p {
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

/* ----------------------------------------------------------------
	FAQ
---------------------------------------------------------------- */

/* Bootstrap's accordion, its items drawn as separate cards with a gap between
   them rather than one joined stack. The open item lifts with a shadow. */
.faq {
  --bs-accordion-bg: var(--c-white);
  --bs-accordion-border-color: var(--c-line);
  --bs-accordion-border-radius: var(--radius-l);
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-btn-padding-y: 1.125rem;
  --bs-accordion-btn-color: var(--c-navy);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-color: var(--c-navy);
  --bs-accordion-active-bg: transparent;
  display: grid;
  gap: 0.75rem;
}

/* Two classes deep to beat Bootstrap's joined-stack borders and corners. */
.faq .faq__item {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  transition: box-shadow var(--dur-base) var(--ease-out);
}

.faq__item:has(.accordion-button:not(.collapsed)) {
  box-shadow: var(--shadow-card);
}

/* Answers open at once, as the old <details> did; Bootstrap would animate their height. */
.faq .collapsing {
  transition: none;
}

/* text-wrap: wrap undoes the balanced wrapping the button would inherit from
   its h3 (3. Base); questions wrap as plain text, as before. */
.faq .accordion-button {
  justify-content: space-between;
  gap: 1rem;
  font: 750 1.0625rem / 1.35 var(--font-display);
  text-align: start;
  text-wrap: wrap;
}

/* Bootstrap underlines the open button; the card's shadow marks it here. */
.faq .accordion-button:not(.collapsed) {
  box-shadow: none;
}

/* A plus sign from two bars, drawn instead of Bootstrap's chevron; the upright
   bar turns flat when the item opens, leaving a minus. */
.faq__icon {
  position: relative;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--c-tint);
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 0.75rem;
  height: 2px;
  border-radius: 2px;
  background: var(--c-primary-fill);
  translate: -50% -50%;
  transition: rotate var(--dur-base) var(--ease-out);
}

.faq__icon::after {
  rotate: 90deg;
}

.accordion-button:not(.collapsed) .faq__icon::after {
  rotate: 0deg;
}

.faq__answer {
  padding: 0 1.25rem 1.25rem;
  color: var(--c-text-2);
}

/* ----------------------------------------------------------------
	Case Study
---------------------------------------------------------------- */

.case {
  display: grid;
  gap: var(--space-l);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  border-radius: var(--radius-xl);
  background: var(--c-deep);
  color: var(--c-on-color);
}

.case__head {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.case__head .kicker {
  color: var(--c-accent-light);
}

.case__title {
  font: 800 clamp(1.5rem, 1.25rem + 1vw, 2.125rem) / 1.15 var(--font-display);
  letter-spacing: -0.02em;
}

.case__grid h3 {
  margin-bottom: 0.375rem;
  color: var(--c-accent-light);
  font: 700 var(--fs-sm) var(--font-display);
}

.case__grid p {
  color: var(--c-on-dark-2);
}

.case__results {
  display: grid;
  gap: var(--space-m);
  padding-top: var(--space-m);
  border-top: 1px solid rgb(255 255 255 / 0.14);
}

.case__results li {
  display: grid;
  gap: 0.25rem;
  color: var(--c-on-dark-2);
  font-size: var(--fs-sm);
}

.case__results strong {
  color: var(--c-on-color);
  font: 800 2.25rem / 1 var(--font-display);
  letter-spacing: -0.03em;
}

@media (min-width: 768px) {
  .case__results {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ----------------------------------------------------------------
	Media & Text
---------------------------------------------------------------- */

.media-text {
  align-items: center;
}

.media-text__media {
  position: relative;
  isolation: isolate;
  margin: 1rem 0 0 1rem;
}

/* Accent circle peeking out behind the photo's top corner. */
.media-text__media::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -1rem;
  inset-inline-start: -1rem;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-accent);
}

.media-text__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-xl);
}

.media-text__body {
  display: grid;
  justify-items: start;
  gap: var(--space-s);
}

.media-text__body > p:not(.kicker) {
  color: var(--c-text-2);
  font-size: 1.0625rem;
}

.media-text__cite {
  font-size: var(--fs-sm);
}

.media-text__cite strong {
  color: var(--c-navy);
}

/* ----------------------------------------------------------------
	Light Testimonials
---------------------------------------------------------------- */

.quote--light {
  border: 1px solid var(--c-line);
}

.quote figcaption .person__initials {
  width: 3.25rem;
  height: 3.25rem;
}

.results__quotes .quote--light figcaption img {
  object-position: 50% 25%;
}

/* ----------------------------------------------------------------
	Hire Talent Pages
---------------------------------------------------------------- */

.hire-checks,
.hire-sectors {
  margin-top: var(--space-xl);
}

.hire-sectors {
  display: grid;
  justify-items: center;
  gap: var(--space-s);
}

.hire-checks {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radius-xl);
  background: var(--c-white);
}

/* "Ideal for" box on each service page. */
.ideal-card {
  display: grid;
  gap: var(--space-m);
  padding: var(--space-l);
  border-radius: var(--radius-xl);
  background: var(--c-tint);
}

.ideal-card__title {
  color: var(--c-navy);
  font: 800 1.375rem var(--font-display);
}

.ideal-card__list {
  display: grid;
  gap: 0.75rem;
}

.ideal-card__list li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--c-navy);
  font-weight: 600;
}

.ideal-card__list .icon {
  color: var(--c-primary);
}

/* ----------------------------------------------------------------
	Sector Overview
---------------------------------------------------------------- */

.sector-overview {
  display: grid;
  gap: var(--space-xl);
}

.sector-overview__roles {
  display: grid;
  gap: var(--space-s);
}

/* ----------------------------------------------------------------
	Accreditations
---------------------------------------------------------------- */

.accreditations {
  display: grid;
  gap: var(--space-s);
  justify-items: center;
  text-align: center;
}

/* ================================================================
	21. People and Contact Cards
================================================================ */

/* ----------------------------------------------------------------
	Person
---------------------------------------------------------------- */

.person {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.person__photo,
.person__initials {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
}

.person__photo {
  object-fit: cover;
  object-position: 50% 20%;
}

/* Stands in for the photo where there is none. */
.person__initials {
  display: grid;
  place-items: center;
  background: var(--c-tint);
  color: var(--c-primary);
  font: 800 1.0625rem var(--font-display);
}

.person__name {
  color: var(--c-navy);
  font: 750 1.0625rem / 1.3 var(--font-display);
}

.person__role {
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.person__role a {
  color: var(--c-primary);
  font-weight: 600;
}

/* ----------------------------------------------------------------
	Contact Card
---------------------------------------------------------------- */

.contact-card {
  display: grid;
  gap: var(--space-s);
  padding: var(--space-l);
  border-radius: var(--radius-xl);
  background: var(--c-surface);
}

.section--surface .contact-card {
  background: var(--c-white);
}

.contact-card__title {
  color: var(--c-navy);
  font: 800 1.25rem var(--font-display);
}

.contact-card > p {
  color: var(--c-text-2);
}

.contact-card__links {
  display: grid;
  gap: 0.625rem;
  padding-top: var(--space-s);
  border-top: 1px solid var(--c-line);
}

.contact-card__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--c-navy);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.contact-card__links .icon {
  color: var(--c-primary);
}

/* Directions under the links: its own width, not the card's. */
.contact-card > .btn {
  justify-self: start;
}

.contact-card__links a:hover {
  color: var(--c-primary);
  text-decoration: underline;
}

/* ----------------------------------------------------------------
	Side Panel
---------------------------------------------------------------- */

/* Navy sidebar on the Request staff and Upload CV pages. */
.side-panel {
  display: grid;
  gap: var(--space-m);
  padding: var(--space-l);
  border-radius: var(--radius-xl);
  background: var(--c-deep);
  color: var(--c-on-color);
}

.side-panel__title {
  font: 800 1.5rem / 1.2 var(--font-display);
}

.side-panel .checks li {
  color: var(--c-on-dark-2);
}

.side-panel .checks__icon {
  background: var(--c-accent);
  color: var(--c-deep);
}

.side-panel__contact {
  color: var(--c-on-dark-2);
  font-size: var(--fs-sm);
}

.side-panel__contact a {
  color: var(--c-on-color);
  font-weight: 700;
}

.side-panel__quote {
  padding-top: var(--space-m);
  border-top: 1px solid rgb(255 255 255 / 0.14);
}

.side-panel__quote blockquote {
  margin: 0;
  font: 600 1.0625rem / 1.45 var(--font-display);
}

.side-panel__quote figcaption {
  margin-top: 0.5rem;
  color: var(--c-accent-light);
  font-size: var(--fs-sm);
}

/* ----------------------------------------------------------------
	Mini Steps
---------------------------------------------------------------- */

/* Numbered steps inside the side panel. */
.mini-steps {
  display: grid;
  gap: 0.875rem;
}

.mini-steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--c-on-dark-2);
}

.mini-steps span {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--c-primary-fill);
  color: var(--c-on-color);
  font: 800 var(--fs-xs) var(--font-display);
}

/* ================================================================
	22. Search, Filters and Listings
================================================================ */

/* ----------------------------------------------------------------
	Search Bar
---------------------------------------------------------------- */

/* Search bar for inner pages and the alternative homepages, built from the
   .field boxes of the hero switch (8. Hero). */
.search-bar {
  display: grid;
  gap: 0.5rem;
  width: 100%;
  max-width: 52rem;
  padding: 0.5rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

.search-bar .btn {
  min-height: 3.5rem;
}

.search-bar--compact {
  max-width: 34rem;
}

/* Tablet and up: fields and button on one row. */
@media (min-width: 768px) {
  .search-bar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) auto;
  }

  .search-bar--compact {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* ----------------------------------------------------------------
	Job Type Tabs
---------------------------------------------------------------- */

.filters--tabs {
  margin: var(--space-xs) 0 0;
}

/* ----------------------------------------------------------------
	Filters Panel
---------------------------------------------------------------- */

/* On phones the form is a Bootstrap collapse behind the Filters button; from 992px
   it is always shown (d-lg-grid in the markup) under a plain Filters title. */
.filters-panel {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  background: var(--c-white);
}

.filters-panel__toggle,
.filters-panel__title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  margin: 0;
  padding: 1rem 1.25rem;
  border: 0;
  background: none;
  color: var(--c-navy);
  font: 750 1.0625rem var(--font-display);
  text-align: start;
}

.filters-panel__toggle {
  cursor: pointer;
}

/* Chevron drawn with two borders; it flips when the panel opens. */
.filters-panel__toggle::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-inline-start: auto;
  border-bottom: 2px solid currentColor;
  border-inline-end: 2px solid currentColor;
  rotate: 45deg;
  transition: rotate var(--dur-base) var(--ease-out);
}

.filters-panel__toggle[aria-expanded="true"]::after {
  rotate: -135deg;
}

.filters-panel__count {
  display: grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding-inline: 0.375rem;
  border-radius: 999px;
  background: var(--c-primary-fill);
  color: var(--c-on-color);
  font-size: var(--fs-xs);
}

.filters-form {
  display: grid;
  gap: var(--space-m);
  padding: 0 1.25rem 1.25rem;
}

/* On phones the panel opens at once, as the old <details> did. */
.filters-form.collapsing {
  transition: none;
}

.filter-group {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
  margin: 0;
  padding: var(--space-s) 0 0;
  border: 0;
  border-top: 1px solid var(--c-line);
}

/* float lets the legend lay out like an ordinary heading inside the fieldset. */
.filter-group legend {
  float: left;
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0;
  color: var(--c-navy);
  font: 750 var(--fs-sm) var(--font-display);
}

/* Bootstrap's .form-check without its hanging indent; the label holds the count
   and stretches over the whole row (see Consent), so a click anywhere on the row
   toggles the box, as before. */
.check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 0;
  margin-bottom: 0;
  padding-block: 0.375rem;
  padding-inline-start: 0;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.check .form-check-input {
  flex: none;
  float: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
}

.check .form-check-label {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
}

.check__count {
  margin-inline-start: auto;
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

.filters-form__actions {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
}

.filters-form__actions a {
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* ----------------------------------------------------------------
	Results Bar
---------------------------------------------------------------- */

.results-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
  color: var(--c-text-2);
}

.results-bar strong {
  color: var(--c-navy);
}

.results-bar label {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* ----------------------------------------------------------------
	Job List
---------------------------------------------------------------- */

.job-list > li {
  display: grid;
}

/* ----------------------------------------------------------------
	Job Alert Card
---------------------------------------------------------------- */

.alert-card {
  display: grid;
  align-content: center;
  gap: var(--space-s);
  padding: var(--space-l);
  border-radius: var(--radius-l);
  background: var(--c-deep);
  color: var(--c-on-color);
}

.alert-card__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-deep);
}

.alert-card__title {
  font: 800 1.375rem / 1.2 var(--font-display);
}

.alert-card p {
  color: var(--c-on-dark-2);
}

.alert-card__form {
  display: grid;
  gap: 0.5rem;
}

/* ----------------------------------------------------------------
	Pagination
---------------------------------------------------------------- */

/* Bootstrap's pagination, drawn as separate rounded tiles. Visual only:
   aria-hidden spans until real paging exists; make them links then. */
.pagination {
  --bs-pagination-padding-x: 0.75rem;
  --bs-pagination-padding-y: 0;
  --bs-pagination-color: var(--c-text-2);
  --bs-pagination-bg: transparent;
  --bs-pagination-border-width: 1.5px;
  --bs-pagination-border-color: var(--c-line);
  --bs-pagination-border-radius: var(--radius-m);
  --bs-pagination-hover-color: var(--c-text-2);
  --bs-pagination-hover-bg: transparent;
  --bs-pagination-hover-border-color: var(--c-line);
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-color: var(--c-on-color);
  --bs-pagination-active-bg: var(--c-primary-fill);
  --bs-pagination-active-border-color: var(--c-primary);
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--space-xl);
}

/* Three classes deep to beat Bootstrap's joined-row margins and corners. */
.pagination .page-item .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 2.75rem;
  height: 2.75rem;
  margin-left: 0;
  border-radius: var(--bs-pagination-border-radius);
  font: 700 var(--fs-sm) var(--font-display);
}

/* ----------------------------------------------------------------
	Save Button
---------------------------------------------------------------- */

/* Save-job bookmark: a visually hidden checkbox inside a label; :has(:checked)
   swaps the outline icon for the solid one. Nothing is stored. z-index lifts it
   above the card's stretched link. */
.save {
  position: relative;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-inline-start: auto;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  color: var(--c-text-3);
  cursor: pointer;
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

/* Both icons share one grid cell, so the swap doesn't shift anything. */
.save > * {
  grid-area: 1 / 1;
}

.save:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.save:has(:focus-visible) {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

.save:has(:checked) {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
}

/* The wide button's outline icon has no .save__off class, hence :first-of-type. */
.save__on,
.save__label-on,
.save:has(:checked) .save__off,
.save:has(:checked) .save__label,
.save:has(:checked) > .icon:first-of-type:not(.save__on) {
  display: none;
}

.save:has(:checked) .save__on {
  display: block;
}

.save:has(:checked) .save__label-on {
  display: inline;
}

/* Full-width Save job button with a text label, in the apply card. */
.save--wide {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: auto;
  min-height: 3.25rem;
  margin: 0;
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--radius-m);
  color: var(--c-navy);
  font: 700 1rem var(--font-display);
}

/* ================================================================
	23. Job Detail
================================================================ */

/* ----------------------------------------------------------------
	Job Header
---------------------------------------------------------------- */

.page-hero--job .breadcrumb {
  margin-bottom: var(--space-l);
}

.job-head {
  display: grid;
  justify-items: start;
  gap: var(--space-s);
}

.job-head__org {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  color: var(--c-text-2);
  font: 700 1.0625rem var(--font-display);
}

.job-head__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.job-head__tags li {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.4375rem 0.875rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-white);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.job-head__tags .icon {
  color: var(--c-primary);
}

.job-head__posted {
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}

/* ----------------------------------------------------------------
	Job Sections
---------------------------------------------------------------- */

.job-section {
  padding-block: var(--space-l);
  border-top: 1px solid var(--c-line);
}

.job-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.job-section h2 {
  margin-bottom: var(--space-s);
  color: var(--c-navy);
  font: 800 1.375rem / 1.25 var(--font-display);
  letter-spacing: -0.02em;
}

.job-section p {
  max-width: 44rem;
  color: var(--c-text);
  font-size: 1.0625rem;
}

.job-section a {
  color: var(--c-primary);
  font-weight: 600;
}

.bullets {
  display: grid;
  gap: 0.625rem;
  max-width: 44rem;
}

.bullets li {
  position: relative;
  padding-inline-start: 1.5rem;
  font-size: 1.0625rem;
}

.bullets li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  inset-inline-start: 0.25rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--c-accent);
}

/* ----------------------------------------------------------------
	Apply Card
---------------------------------------------------------------- */

/* Pay, Apply now and key facts; it heads the sticky sidebar on job pages. */
.apply-card {
  display: grid;
  gap: var(--space-s);
  padding: var(--space-l);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

.apply-card__pay {
  color: var(--c-navy);
  font: 800 2.5rem / 1 var(--font-display);
  letter-spacing: -0.035em;
}

.apply-card__pay span {
  color: var(--c-text-3);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0;
}

.apply-card__note {
  margin-bottom: var(--space-xs);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

/* ----------------------------------------------------------------
	Key Facts
---------------------------------------------------------------- */

/* Label and value on one row. --compact (branch pages) drops the outer rules. */
.facts {
  margin-top: var(--space-xs);
  border-top: 1px solid var(--c-line);
}

.facts > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-sm);
}

.facts dt {
  color: var(--c-text-3);
}

.facts dd {
  color: var(--c-navy);
  font-weight: 600;
  text-align: end;
}

.facts--compact {
  width: 100%;
  margin-top: 0;
  border-top: 0;
}

.facts--compact > div:last-child {
  border-bottom: 0;
}

/* ----------------------------------------------------------------
	Apply Form Panel
---------------------------------------------------------------- */

/* Grey panel around the apply form; border-top: 0 cancels the rule .job-section draws. */
.apply-form {
  margin-top: var(--space-m);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-top: 0;
  border-radius: var(--radius-xl);
  background: var(--c-surface);
}

/* Two classes to outrank .job-section p; the negative margin tucks it under the heading. */
.apply-form .apply-form__intro {
  margin: -0.5rem 0 var(--space-m);
  color: var(--c-text-2);
}

/* ================================================================
	24. Forms
================================================================ */

/* ----------------------------------------------------------------
	Form Layout
---------------------------------------------------------------- */

.form {
  display: grid;
  gap: var(--space-l);
}

.form fieldset {
  display: grid;
  gap: var(--space-s);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* float lets a legend lay out like an ordinary heading inside its fieldset. */
.form legend,
.form-card__title {
  float: left;
  width: 100%;
  margin-bottom: var(--space-xs);
  padding: 0;
  color: var(--c-navy);
  font: 800 1.25rem / 1.3 var(--font-display);
}

/* ----------------------------------------------------------------
	Form Card
---------------------------------------------------------------- */

.form-card {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

/* ----------------------------------------------------------------
	Form Grid & Fields
---------------------------------------------------------------- */

.form-field {
  display: grid;
  align-content: start;
  gap: 0.4375rem;
  min-width: 0;
}

/* margin-bottom: 0 undoes Bootstrap's .form-label margin; the form grids space the fields. */
.form-field label,
.form-label {
  margin-bottom: 0;
  color: var(--c-navy);
  font: 700 var(--fs-sm) / 1.3 var(--font-display);
}

/* The required asterisk; the input's required attribute does the announcing. */
.form-field label > span[aria-hidden="true"] {
  color: var(--c-accent-ink);
}

/* ----------------------------------------------------------------
	Inputs & Selects
---------------------------------------------------------------- */

/* Bootstrap's .form-control and .form-select in the theme's shape. */
.form-control,
.form-select {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--radius-m);
  background-color: var(--c-white);
  color: var(--c-navy);
  font-size: 1rem;
  font-weight: inherit;
  line-height: inherit;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.form-control::placeholder {
  color: #8b93ab;
}

/* Bootstrap recolours any focused field and adds its glow; the theme keeps the
   field as it is and shows its ring only for keyboard focus. */
.form-control:focus,
.form-select:focus {
  border-color: var(--c-line-strong);
  background-color: var(--c-white);
  color: var(--c-navy);
  box-shadow: none;
}

.form-control:focus-visible,
.form-select:focus-visible {
  border-color: var(--c-primary);
  outline: none;
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--c-primary-fill) 16%, transparent);
}

/* The padding leaves room for the .select__icon chevron (Bootstrap's own arrow is
   an SVG image, switched off in 2. Tokens). */
.form-select {
  padding-inline-end: 2.75rem;
  cursor: pointer;
}

/* Selects sit in .select so the Font Awesome chevron can be drawn over them. */
.select {
  position: relative;
  display: grid;
}

.select__icon {
  position: absolute;
  top: 50%;
  inset-inline-end: 0.875rem;
  translate: 0 -50%;
  color: var(--c-text-2);
  pointer-events: none;
}

textarea.form-control {
  min-height: 8rem;
  resize: vertical;
}

.form-select-sm {
  width: auto;
  min-height: 2.75rem;
  padding-block: 0.5rem;
  padding-inline-start: 1rem;
  border-radius: var(--radius-m);
  font-size: var(--fs-sm);
}

/* ----------------------------------------------------------------
	Select Menu
---------------------------------------------------------------- */

/* functions.js (Select Menus) marks each .select with .select--menu and opens
   the theme's own list for it. The select lets clicks through to the wrapper,
   so the browser's list never opens; while the theme's list is open, the field
   keeps the focus colour and the chevron points up. */
.select--menu {
  cursor: pointer;
}

.select--menu > select {
  pointer-events: none;
}

.select--menu.is-open > .form-select {
  border-color: var(--c-primary);
}

.select--menu.is-open > .select__icon {
  rotate: 180deg;
}

/* A .field box draws its ring for focus within it, but Chrome doesn't count
   focus inside the open list (a popover) as within the box, so the open state
   draws it too. */
.field:has(> .select--menu.is-open) {
  box-shadow: inset 0 0 0 2px var(--c-primary);
}

/* The list is a popover (it shows above everything), placed by the script and
   at least as wide as the field; on a narrow field it grows to its longest
   option, up to 22rem. The browser's own popover box is reset. */
.select__menu {
  position: fixed;
  inset: auto;
  width: max-content;
  max-width: min(22rem, 100vw - 1rem);
  margin: 0;
  padding: 0.375rem;
  overflow: visible;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  background: var(--c-white);
  color: var(--c-navy);
  font: 500 var(--fs-sm) / 1.4 var(--font-text);
  text-align: start;
  white-space: normal;
  box-shadow: var(--shadow-float);
  cursor: default;
}

/* Long lists open with a search field in the theme's tinted field box. */
.select__search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
  padding-inline: 0.75rem;
  border-radius: var(--radius-s);
  background: var(--c-surface);
  color: var(--c-text-3);
}

.select__search:focus-within {
  box-shadow: inset 0 0 0 2px var(--c-primary);
}

/* Two classes, so a list opened from a .field box keeps this look. No width of
   its own: the options set the list's width and the field fills it. */
.select__menu .select__input {
  flex: 1;
  width: 0;
  min-height: 2.5rem;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--c-navy);
  font: inherit;
}

.select__input::placeholder {
  color: #8b93ab;
}

.select__list {
  display: grid;
  gap: 0.125rem;
  max-height: min(18rem, 50vh);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

/* The active option shows where the keys are, so the list needs no ring. */
.select__list:focus {
  outline: none;
}

.select__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-s);
  cursor: pointer;
}

.select__option.is-active {
  background: var(--c-tint);
}

.select__option[aria-selected="true"] {
  color: var(--c-primary);
  font-weight: 700;
}

.select__option[aria-disabled] {
  color: var(--c-text-3);
  cursor: default;
}

.select__menu .select__empty {
  margin: 0;
  padding: 0.5rem 0.75rem;
  color: var(--c-text-3);
}

.select__empty:empty {
  display: none;
}

/* Forced colours drop backgrounds and shadows: outlines mark the active
   option and the focused search field instead. */
@media (forced-colors: active) {
  .select__option.is-active,
  .select__search:focus-within {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}

/* ----------------------------------------------------------------
	Choice Chips
---------------------------------------------------------------- */

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* A radio or checkbox as a pill: Bootstrap's toggle button (.btn-check before a
   .btn label). Checked, it fills and gains a dot. */
.btn-choice {
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-size: var(--fs-sm);
  --bs-btn-font-weight: 650;
  --bs-btn-line-height: normal;
  --bs-btn-border-radius: 999px;
  --bs-btn-color: var(--c-text-2);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--c-line-strong);
  --bs-btn-hover-color: var(--c-primary);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--c-primary);
  --bs-btn-active-color: var(--c-primary);
  --bs-btn-active-bg: var(--c-tint);
  --bs-btn-active-border-color: var(--c-primary);
  gap: 0.5rem;
  min-height: 2.75rem;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

/* No lift on hover, unlike other buttons; Bootstrap also resets a toggle's hover
   colours, which the chips keep. */
.btn-choice:hover {
  transform: none;
}

.btn-check + .btn-choice:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.btn-check:checked + .btn-choice::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

.btn-check:focus-visible + .btn-choice,
.is-tabbing .btn-check:focus + .btn-choice {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* Bootstrap gives a focused toggle its hover border; an unchecked chip keeps its
   own and shows only the ring. */
.btn-check:not(:checked):focus-visible + .btn-choice:not(:hover) {
  border-color: var(--bs-btn-border-color);
}

/* ----------------------------------------------------------------
	File Upload
---------------------------------------------------------------- */

/* Dashed frame around a native file input. */
.file-drop {
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 0.75rem;
  padding: var(--space-l) var(--space-m);
  border: 2px dashed var(--c-line-strong);
  border-radius: var(--radius-l);
  background: var(--c-surface);
  text-align: center;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.apply-form .file-drop,
.section--surface .file-drop {
  background: var(--c-white);
}

.file-drop:hover,
.file-drop:has(:focus-visible) {
  border-color: var(--c-primary);
  background: var(--c-tint);
}

.file-drop__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--c-primary-fill);
  color: var(--c-on-color);
}

.file-drop label {
  display: grid;
  gap: 0.125rem;
  color: var(--c-navy);
  font: 700 1rem var(--font-display);
}

.file-drop label span {
  color: var(--c-text-3);
  font: 400 var(--fs-sm) / 1.4 var(--font-text);
}

.file-drop input {
  width: 100%;
  max-width: 20rem;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

/* The native Choose file button, restyled. */
.file-drop input::file-selector-button {
  margin-inline-end: 0.75rem;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: var(--radius-s);
  background: var(--c-deep);
  color: var(--c-on-color);
  font: 700 var(--fs-sm) var(--font-display);
  cursor: pointer;
}

/* ----------------------------------------------------------------
	Consent
---------------------------------------------------------------- */

/* Bootstrap's .form-check without its hanging indent: box and label side by side. */
.consent {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 0;
  margin-bottom: 0;
  padding-left: 0;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.consent .form-check-input {
  flex: none;
  float: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.125rem 0 0;
}

.consent a {
  position: relative;
  z-index: 1;
  color: var(--c-primary);
  font-weight: 600;
}

/* Bootstrap puts the box beside its label instead of inside it, so the label
   reaches over the whole row: a click on the gap or the row's edge toggles the
   box, as it did when the box sat inside the label. Links in the text stay on top. */
.check .form-check-label::before,
.consent .form-check-label::before {
  content: "";
  position: absolute;
  inset: 0;
}

/* ----------------------------------------------------------------
	Submit Row
---------------------------------------------------------------- */

.form__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-m);
}

.form__submit p {
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}

/* ================================================================
	25. Map and Branches
================================================================ */

/* ----------------------------------------------------------------
	Map Card
---------------------------------------------------------------- */

.map-card {
  padding: var(--space-m);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  background: var(--c-white);
}

.map-card--hero {
  width: min(100%, 24rem);
  margin-inline: auto;
  box-shadow: var(--shadow-card);
}

.map-card--small {
  margin-top: var(--space-s);
  padding: var(--space-s);
}

.map-card__note {
  margin-top: var(--space-xs);
  color: var(--c-text-3);
  font-size: var(--fs-sm);
  text-align: center;
}

/* ----------------------------------------------------------------
	Map
---------------------------------------------------------------- */

/* Branch map. assets/js/functions.js turns each .geo-map into a MapLibre map
   of the places listed inside it (data-lat / data-lng, so any country works).
   Until it starts, and whenever it can't (no script, no WebGL, no connection),
   the list shows as chips. MapLibre's own stylesheet isn't loaded, because it
   draws its controls with SVG images: the few rules the map needs are below. */
.geo-map {
  --map-h: 24rem;
  position: relative;
  height: var(--map-h);
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--c-tint);
}

/* Desktop: a taller map. */
@media (min-width: 992px) {
  .geo-map {
    --map-h: 34rem;
  }
}

/* The street map in the Contact 1 head office card. */
.map-card--small .geo-map {
  --map-h: 16rem;
}

/* Places as chips: the fallback, and the list before the map starts. More
   places than the box holds scroll inside it, so every one stays reachable. */
.geo-map__places {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.5rem;
  max-height: 100%;
  margin: 0;
  padding: 1rem;
  overflow-y: auto;
  list-style: none;
}

/* While the map starts, its empty canvas lies over the list: the list hides
   until the map is ready (and replaces it) or has fallen back to it. */
.geo-map.maplibregl-map:not(.geo-map--ready):not(.geo-map--failed) > .geo-map__places {
  visibility: hidden;
}

.geo-map__places .geo-map__pin,
.geo-map__places .geo-map__cluster {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.9375rem;
  border: 1.5px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-white);
  color: var(--c-navy);
  font: 650 var(--fs-sm) / 1.2 var(--font-display);
  text-decoration: none;
}

.geo-map__places a:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.geo-map__places .geo-map__pin--current {
  border-color: var(--c-accent);
  font-weight: 800;
}

/* On the map, a place is a dot. Pins don't mirror in right-to-left layouts:
   geography doesn't. */
.geo-map__pin.maplibregl-marker {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: var(--c-primary);
  box-shadow: 0 0 0 2px var(--c-white), 0 2px 6px rgb(12 24 56 / 0.25);
  transition: background-color var(--dur-fast) var(--ease-out);
}

a.geo-map__pin.maplibregl-marker:hover,
a.geo-map__pin.maplibregl-marker:focus-visible {
  background: var(--c-accent);
}

a.geo-map__pin.maplibregl-marker:focus-visible {
  outline-offset: 4px;
}

/* A linked pin's city name stays as its accessible name, hidden from view; the
   browser shows it on hover from the title. */
a.geo-map__pin.maplibregl-marker .geo-map__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.geo-map__pin--current.maplibregl-marker {
  z-index: 1;
  width: 1.125rem;
  height: 1.125rem;
  background: var(--c-accent);
}

/* Halo round the current branch; it pulses where motion is allowed (45. Motion). */
.geo-map__pin--current.maplibregl-marker::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -50%;
  border-radius: 50%;
  background: var(--c-accent);
  opacity: 0.22;
}

/* Name tag beside the current pin; physical left, like the pins. */
.geo-map__pin--current.maplibregl-marker .geo-map__label {
  position: absolute;
  top: 50%;
  left: calc(100% + 0.375rem);
  translate: 0 -50%;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--c-white);
  box-shadow: 0 0.125rem 0.5rem rgb(12 24 56 / 0.15);
  color: var(--c-navy);
  font: 800 0.8125rem / 1.4 var(--font-display);
  white-space: nowrap;
}

/* Zoom buttons, added by functions.js (MapLibre's own draw SVG icons). Focus
   rings sit inside, because the panel clips its rounded corners. */
.geo-map__zoom {
  position: absolute;
  z-index: 2;
  top: 0.75rem;
  right: 0.75rem;
  display: grid;
  overflow: hidden;
  border-radius: 0.75rem;
  background: var(--c-white);
  box-shadow: 0 0.25rem 0.75rem rgb(12 24 56 / 0.18);
}

.geo-map__zoom button {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-navy);
  transition: color var(--dur-fast) var(--ease-out);
}

.geo-map__zoom button + button {
  border-top: 1px solid var(--c-line);
}

.geo-map__zoom button:hover {
  color: var(--c-primary);
}

.geo-map__zoom button:focus-visible {
  outline-offset: -4px;
}

/* The canvas is a tab stop (the arrow keys pan) and fills the clipped box, so
   its focus ring goes round the box instead. */
.geo-map:has(.maplibregl-canvas:focus-visible) {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
}

/* MapLibre: canvas, cursors and markers, from its stylesheet without the images. */
.maplibregl-canvas {
  position: absolute;
  top: 0;
  left: 0;
}

.maplibregl-canvas-container.maplibregl-interactive {
  cursor: grab;
}

.maplibregl-canvas-container.maplibregl-interactive:active {
  cursor: grabbing;
}

.maplibregl-marker {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

/* Touch: which gestures stay with the browser (page scroll, pinch) and which
   go to the map. With cooperative gestures one finger scrolls the page. */
.maplibregl-canvas-container.maplibregl-touch-zoom-rotate,
.maplibregl-canvas-container.maplibregl-touch-zoom-rotate .maplibregl-canvas {
  touch-action: pan-x pan-y;
}

.maplibregl-canvas-container.maplibregl-touch-drag-pan,
.maplibregl-canvas-container.maplibregl-touch-drag-pan .maplibregl-canvas {
  touch-action: pinch-zoom;
}

.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan,
.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan .maplibregl-canvas {
  touch-action: none;
}

.maplibregl-canvas-container.maplibregl-touch-drag-pan.maplibregl-cooperative-gestures,
.maplibregl-canvas-container.maplibregl-touch-drag-pan.maplibregl-cooperative-gestures .maplibregl-canvas {
  touch-action: pan-x pan-y;
}

/* The credits corner. The data licence requires the credits, so they always
   show in full; the button that folds them away is hidden. */
.maplibregl-ctrl-bottom-right {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.maplibregl-ctrl {
  pointer-events: auto;
}

.maplibregl-ctrl-attrib {
  padding: 0.125rem 0.5rem;
  border-top-left-radius: 0.5rem;
  background: color-mix(in srgb, var(--c-white) 82%, transparent);
  color: var(--c-text-3);
  font-size: 0.6875rem;
  line-height: 1.4;
}

.maplibregl-ctrl-attrib a {
  color: inherit;
}

.maplibregl-ctrl-attrib-button {
  display: none;
}

/* No credits yet while the style loads: no empty pill. */
.maplibregl-ctrl-attrib.maplibregl-attrib-empty {
  display: none;
}

/* "Use Ctrl + scroll to zoom the map" (or two fingers on a phone), shown for a
   moment when the wheel or one finger meets the map. */
.maplibregl-cooperative-gesture-screen {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgb(12 24 56 / 0.55);
  color: #fff;
  font: 700 1.0625rem / 1.3 var(--font-display);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease 1s;
}

.maplibregl-cooperative-gesture-screen.maplibregl-show {
  opacity: 1;
  transition: opacity 0.05s;
}

.maplibregl-cooperative-gesture-screen .maplibregl-mobile-message {
  display: none;
}

@media (hover: none), (pointer: coarse) {
  .maplibregl-cooperative-gesture-screen .maplibregl-desktop-message {
    display: none;
  }

  .maplibregl-cooperative-gesture-screen .maplibregl-mobile-message {
    display: block;
  }
}

/* ----------------------------------------------------------------
	Branch Cards
---------------------------------------------------------------- */

.branch-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: var(--space-m);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  background: var(--c-white);
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.branch-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-card);
  transform: translateY(-0.1875rem);
}

.branch-card h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  color: var(--c-navy);
  font: 800 1.25rem var(--font-display);
}

.branch-card h3 a {
  text-decoration: none;
}

.branch-card p {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.branch-card p .icon {
  margin-top: 0.2em;
  color: var(--c-primary);
}

/* Phone links sit above the card's stretched link so they stay clickable. */
.branch-card a[href^="tel"] {
  position: relative;
  z-index: 2;
  color: var(--c-navy);
  font-weight: 600;
}

.branch-card__go {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.375rem;
  color: var(--c-primary);
  font: 700 var(--fs-sm) var(--font-display);
}

/* ================================================================
	26. Advice and Articles
================================================================ */

/* ----------------------------------------------------------------
	Featured Post
---------------------------------------------------------------- */

.feature-post {
  position: relative;
  display: grid;
  overflow: hidden;
  margin-bottom: var(--grid-gap);
  border-radius: var(--radius-xl);
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

.feature-post__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.feature-post__body {
  display: grid;
  align-content: center;
  gap: var(--space-s);
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.feature-post__title {
  color: var(--c-navy);
  font: 800 clamp(1.5rem, 1.25rem + 1vw, 2.125rem) / 1.18 var(--font-display);
  letter-spacing: -0.02em;
}

.feature-post__title a {
  text-decoration: none;
}

.feature-post:hover .feature-post__title a {
  color: var(--c-primary);
}

.feature-post__body > p:not([class]) {
  color: var(--c-text-2);
}

@media (min-width: 992px) {
  .feature-post {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}

/* ----------------------------------------------------------------
	Archive Grid
---------------------------------------------------------------- */

/* ----------------------------------------------------------------
	Newsletter Band
---------------------------------------------------------------- */

.newsletter-band {
  align-items: center;
}

.newsletter-band > div {
  display: grid;
  gap: var(--space-s);
}

@media (min-width: 992px) {
  .newsletter-band .search-bar {
    justify-self: end;
  }
}

/* ----------------------------------------------------------------
	Article Header
---------------------------------------------------------------- */

.article-header {
  padding-top: clamp(1.75rem, 1.25rem + 2.5vw, 3.5rem);
  background:
    radial-gradient(45% 60% at 95% 0%, var(--c-tint), transparent 70%),
    var(--c-white);
}

.article-header .container--narrow {
  display: grid;
  justify-items: start;
  gap: var(--space-s);
}

.article-header .breadcrumb {
  margin-bottom: var(--space-xs);
}

.article-header .badge {
  text-decoration: none;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: var(--space-xs);
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}

.article-meta p {
  display: grid;
}

.article-meta strong {
  color: var(--c-navy);
  font-family: var(--font-display);
}

.article-meta .article-meta__date {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-inline-start: auto;
}

/* ----------------------------------------------------------------
	Article Image
---------------------------------------------------------------- */

.article-hero {
  margin-top: var(--space-xl);
}

.article-hero img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--radius-xl);
}

/* ----------------------------------------------------------------
	Prose
---------------------------------------------------------------- */

/* Long-form text in articles and legal pages; spacing is in em, so it scales with
   the text. */
.prose {
  max-width: 44rem;
  color: var(--c-text);
  font-size: 1.125rem;
  line-height: 1.7;
}

.prose > * + * {
  margin-top: 1.1em;
}

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

.prose h2 {
  margin-top: 1.9em;
  color: var(--c-navy);
  font: 800 clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem) / 1.25 var(--font-display);
  letter-spacing: -0.02em;
}

/* Brings back the bullets that the list reset (3. Base) removes. */
.prose ul {
  padding-inline-start: 1.25rem;
  list-style-type: disc;
}

.prose ol {
  padding-inline-start: 1.5rem;
  list-style-type: decimal;
}

.prose ol > li::marker {
  font-weight: 700;
}

.prose li + li {
  margin-top: 0.5em;
}

.prose li::marker {
  color: var(--c-accent);
}

/* ----------------------------------------------------------------
	Tip Box
---------------------------------------------------------------- */

.tip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-s);
  margin-block: 1.75em;
  padding: var(--space-m);
  border-radius: var(--radius-l);
  background: var(--c-tint);
  color: var(--c-navy);
  font-size: 1rem;
  line-height: 1.6;
}

.tip__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--c-primary-fill);
  color: var(--c-on-color);
}

.tip strong {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--font-display);
}

/* ----------------------------------------------------------------
	Pull Quote
---------------------------------------------------------------- */

.pullquote {
  margin: 1.75em 0;
  padding-inline-start: var(--space-m);
  border-inline-start: 4px solid var(--c-accent);
  color: var(--c-navy);
  font: 700 clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem) / 1.4 var(--font-display);
}

/* ----------------------------------------------------------------
	Author Box
---------------------------------------------------------------- */

.author-box {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  max-width: 44rem;
  margin-top: var(--space-xl);
  padding: var(--space-m);
  border-radius: var(--radius-l);
  background: var(--c-surface);
}

/* ----------------------------------------------------------------
	Sidebar Call to Action
---------------------------------------------------------------- */

.side-cta {
  display: grid;
  gap: var(--space-s);
  padding: var(--space-l);
  border-radius: var(--radius-xl);
  background: var(--c-tint);
}

.side-cta__title {
  color: var(--c-navy);
  font: 800 1.5rem / 1.2 var(--font-display);
}

.side-cta p:not(.kicker) {
  color: var(--c-text-2);
}

/* ----------------------------------------------------------------
	Share Links
---------------------------------------------------------------- */

.share a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-navy);
  font-weight: 600;
}

/* ================================================================
	27. Company Pages
================================================================ */

/* ----------------------------------------------------------------
	Weekly Pay Card
---------------------------------------------------------------- */

/* Timesheet-to-payday week on the Temporary work page; .pay-week__paid is payday. */
.pay-card {
  display: grid;
  gap: var(--space-m);
  padding: var(--space-l);
  border-radius: var(--radius-xl);
  background: var(--c-deep);
  color: var(--c-on-color);
}

.pay-card__title {
  font: 800 1.375rem var(--font-display);
}

.pay-week {
  display: grid;
  gap: 0.625rem;
}

.pay-week li {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: 0.75rem;
  border-radius: var(--radius-m);
  background: rgb(255 255 255 / 0.06);
  color: var(--c-on-dark-2);
  font-size: var(--fs-sm);
}

.pay-week strong {
  display: block;
  color: var(--c-on-color);
  font: 750 1rem var(--font-display);
}

.pay-week__day {
  display: grid;
  flex: none;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-m);
  background: rgb(255 255 255 / 0.1);
  color: var(--c-on-color);
  font: 800 var(--fs-sm) var(--font-display);
}

.pay-week .pay-week__paid {
  background: var(--c-accent);
  color: var(--c-deep);
}

.pay-week__paid strong,
.pay-week__paid .pay-week__day {
  color: var(--c-deep);
}

.pay-week__paid .pay-week__day {
  background: rgb(255 255 255 / 0.35);
}

/* ----------------------------------------------------------------
	Timeline
---------------------------------------------------------------- */

/* The line is .history::before and each entry's ::before is a dot on it; the
   last entry's dot is filled with the accent. */
.history {
  position: relative;
  display: grid;
  gap: var(--space-m);
  padding-inline-start: 2.25rem;
}

.history::before {
  content: "";
  position: absolute;
  inset-block: 0.5rem;
  inset-inline-start: 0.5625rem;
  width: 2px;
  background: var(--c-line);
}

.history li {
  position: relative;
  display: grid;
  gap: 0.25rem;
}

.history li::before {
  content: "";
  position: absolute;
  top: 0.3125rem;
  inset-inline-start: -2.25rem;
  width: 1.125rem;
  height: 1.125rem;
  border: 3px solid var(--c-primary);
  border-radius: 50%;
  background: var(--c-white);
}

.history li:last-child::before {
  border-color: var(--c-accent);
  background: var(--c-accent);
}

.history__year {
  color: var(--c-primary);
  font: 800 1.125rem var(--font-display);
}

.history p {
  color: var(--c-text-2);
}

/* ----------------------------------------------------------------
	Job Openings
---------------------------------------------------------------- */

.openings {
  display: grid;
  gap: var(--grid-gap);
}

.opening {
  display: grid;
  gap: var(--space-s);
  align-items: center;
  padding: var(--space-m) var(--space-l);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  background: var(--c-white);
}

.opening__title {
  color: var(--c-navy);
  font: 800 1.25rem var(--font-display);
}

.opening__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-block: 0.25rem 0.375rem;
  color: var(--c-primary);
  font: 700 var(--fs-sm) var(--font-display);
}

.opening p:last-child {
  color: var(--c-text-2);
}

.opening .btn {
  justify-self: start;
}

@media (min-width: 768px) {
  .opening {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* ----------------------------------------------------------------
	Table of Contents
---------------------------------------------------------------- */

/* Numbered contents box in the legal pages' sidebar. */
.toc {
  padding: var(--space-m);
  border-radius: var(--radius-l);
  background: var(--c-surface);
}

.toc__title {
  margin-bottom: 0.75rem;
  color: var(--c-navy);
  font: 800 1rem var(--font-display);
}

.toc ol {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding-inline-start: 1.25rem;
  list-style-type: decimal;
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}

.toc a {
  color: var(--c-text-2);
  text-decoration: none;
}

.toc a:hover {
  color: var(--c-primary);
  text-decoration: underline;
}

/* ================================================================
	28. Confirmation and Error States
================================================================ */

/* ----------------------------------------------------------------
	State Message
---------------------------------------------------------------- */

/* Thank-you and 404 pages. */
.state-section {
  background:
    radial-gradient(40% 60% at 50% 0%, var(--c-tint), transparent 70%),
    var(--c-white);
}

.state {
  display: grid;
  justify-items: center;
  gap: var(--space-m);
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}

.state .page-hero__lead {
  margin-inline: auto;
}

.state__icon {
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: var(--c-mint-soft);
  color: var(--c-mint-ink);
}

.state__icon .icon {
  --icon: 2.25rem;
}

/* The large 404. */
.state__code {
  color: var(--c-primary);
  font: 800 clamp(5rem, 3.5rem + 7vw, 9rem) / 0.9 var(--font-display);
  letter-spacing: -0.05em;
}

.state .search-bar {
  justify-self: center;
  text-align: start;
}

/* ----------------------------------------------------------------
	Next Links
---------------------------------------------------------------- */

/* A Bootstrap row with its own top margin, so the vertical gutter is a row-gap
   (Bootstrap's negative top margin would merge with the space above). The width
   takes in the row's negative side margins. */
.next-links {
  --bs-gutter-y: 0;
  row-gap: var(--grid-gap);
  width: calc(100% + var(--bs-gutter-x));
  margin-top: var(--space-m);
  text-align: start;
}

.next-links a {
  display: grid;
  gap: 0.25rem;
  height: 100%;
  padding: var(--space-m);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  background: var(--c-white);
  text-decoration: none;
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.next-links a:hover {
  border-color: transparent;
  box-shadow: var(--shadow-card);
}

.next-links strong {
  color: var(--c-navy);
  font: 750 1.0625rem var(--font-display);
}

.next-links span {
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

/* Small print on the thank-you page: nothing entered in the forms is sent. */
.prototype-note {
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

/* ----------------------------------------------------------------
	Sitemap
---------------------------------------------------------------- */

.sitemap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-xl) var(--grid-gap);
}

.sitemap__title {
  margin-bottom: var(--space-s);
  padding-bottom: 0.625rem;
  border-bottom: 2px solid var(--c-primary);
  color: var(--c-navy);
  font: 800 1.125rem var(--font-display);
}

.sitemap li + li {
  margin-top: 0.5rem;
}

.sitemap a {
  color: var(--c-text-2);
  text-decoration: none;
}

.sitemap a:hover {
  color: var(--c-primary);
  text-decoration: underline;
}

/* ================================================================
	29. Layout Variants — Shared Pieces
================================================================ */

/* ----------------------------------------------------------------
	View Switch
---------------------------------------------------------------- */

/* Grid / list / map links on the job search pages; .is-active marks the current view. */
.view-switch {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: var(--radius-m);
  background: var(--c-surface);
}

.view-switch__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-s);
  color: var(--c-text-2);
  font: 700 var(--fs-sm) / 1 var(--font-display);
  text-decoration: none;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.view-switch__link:hover {
  color: var(--c-primary);
}

.view-switch__link.is-active {
  background: var(--c-white);
  color: var(--c-primary);
  box-shadow: 0 0.125rem 0.5rem rgb(12 24 56 / 0.1);
}

/* ----------------------------------------------------------------
	Select in a Search Field
---------------------------------------------------------------- */

/* A select inside a .field box (Home 2's job type); the chevron is a .select__icon. */
.field select {
  min-width: 0;
  min-height: 1.75rem;
  padding: 0 1.5rem 0 0;
  border: 0;
  background: transparent;
  color: var(--c-navy);
  font-size: 1rem;
  font-weight: 500;
  appearance: none;
  cursor: pointer;
}

.field select:focus-visible {
  outline: none;
}

.field .select__icon {
  inset-inline-end: 0;
}

/* ----------------------------------------------------------------
	Job Rows
---------------------------------------------------------------- */

.job-rows {
  display: grid;
  gap: 0.75rem;
}

/* Phones: mark, title and save on the first row, pay and date under the title.
   From 768px it is one row. */
.job-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  background: var(--c-white);
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.job-row:hover {
  border-color: transparent;
  box-shadow: var(--shadow-card);
}

.job-row > .org-mark {
  grid-row: 1 / span 2;
  align-self: start;
}

.job-row__main {
  grid-column: 2;
  min-width: 0;
}

.job-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.job-row__title {
  margin-top: 0.125rem;
  color: var(--c-navy);
  font: 750 1.1875rem / 1.25 var(--font-display);
  letter-spacing: -0.015em;
}

.job-row__title a {
  text-decoration: none;
}

.job-row__title a:hover {
  color: var(--c-primary);
}

.job-row .ticket__tags {
  margin-top: 0.625rem;
}

/* Tags with an icon line it up with the text. */
.ticket__tags li:has(.icon) {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.ticket__tags .icon {
  --icon: 0.875rem;
  color: var(--c-primary);
}

.job-row__pay {
  grid-column: 2;
  grid-row: 2;
  color: var(--c-navy);
  font: 800 1.375rem / 1 var(--font-display);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.job-row__pay span {
  color: var(--c-text-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0;
}

.job-row__posted {
  grid-column: 3;
  grid-row: 2;
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  text-align: end;
  white-space: nowrap;
}

.job-row > .save {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
}

@media (min-width: 768px) {
  .job-row {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    gap: 1.25rem;
  }

  .job-row > .org-mark {
    grid-row: auto;
    align-self: center;
  }

  .job-row__pay {
    grid-column: 3;
    grid-row: 1;
  }

  .job-row__posted {
    grid-column: 4;
    grid-row: 1;
  }

  .job-row > .save {
    grid-column: 5;
    align-self: center;
  }
}

/* ----------------------------------------------------------------
	Scroller
---------------------------------------------------------------- */

/* Scroll-snap row, no script: swipe, scroll or tab through. Cards are 20rem,
   or 84% on phones so the next one peeks in. The negative margin and matching
   padding stop hover shadows and focus rings being clipped. */
.scroller {
  display: grid;
  grid-auto-columns: min(20rem, 84%);
  grid-auto-flow: column;
  gap: var(--grid-gap);
  margin-inline: -0.25rem;
  padding: 0.5rem 0.25rem 1.25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* Snaps cards to the padding's inner edge, so the first one lines up with the content above. */
  scroll-padding-inline: 0.25rem;
  scrollbar-color: var(--c-primary) var(--c-tint);
  scrollbar-width: thin;
  /* Arrow and dot clicks glide; the reduced-motion rule makes them jump. */
  scroll-behavior: smooth;
}

/* The list itself takes focus (tabindex="0") so the keyboard can scroll it. */
.scroller:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 4px;
}

.scroller__item {
  display: grid;
  scroll-snap-align: start;
}

.scroller .ticket {
  height: 100%;
}

.scroller__hint {
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}

/* Arrows and dots under a scroller. assets/js/functions.js wires the arrows to the
   list, adds one dot per card and then removes the hidden attribute. Drawn in
   white for the primary-colour band they sit on (Home 1 testimonials). */
.scroller-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  margin-top: var(--space-s);
}

.scroller-nav[hidden] {
  display: none;
}

.scroller-nav__arrow {
  display: inline-grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: 1.5px solid rgb(255 255 255 / 0.4);
  border-radius: 50%;
  background: none;
  color: var(--c-on-color);
  cursor: pointer;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
}

.scroller-nav__arrow:hover {
  border-color: var(--c-on-color);
  background: var(--c-on-color);
  color: var(--c-primary-fill);
}

/* At either end the arrow fades and ignores the pointer. It stays focusable
   (aria-disabled, not disabled), so keyboard focus isn't dropped at the end. */
.scroller-nav__arrow[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

.scroller-nav__dots {
  display: flex;
}

/* Each dot is a 1.5rem target around a small mark; the marks of the cards in
   view stretch into pills. */
.scroller-nav__dot {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.scroller-nav__dot::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.4);
  transition:
    width var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

.scroller-nav__dot:hover::before {
  background: rgb(255 255 255 / 0.7);
}

.scroller-nav__dot--active::before {
  width: 1.25rem;
  background: var(--c-on-color);
}

/* ----------------------------------------------------------------
	Quote Grid
---------------------------------------------------------------- */

/* ----------------------------------------------------------------
	Call Band
---------------------------------------------------------------- */

.cta-band {
  padding-block: clamp(2.5rem, 2rem + 3vw, 4rem);
  background: var(--c-deep);
  color: var(--c-on-color);
}

.cta-band__inner {
  gap: var(--space-l);
}

.cta-band__title {
  font: 800 clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem) / 1.1 var(--font-display);
  letter-spacing: -0.03em;
}

.cta-band p {
  margin-top: 0.5rem;
  color: var(--c-on-dark-2);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ----------------------------------------------------------------
	Demo Layout Switcher
---------------------------------------------------------------- */

/* Demo-only layout switcher: a Bootstrap dropup pinned bottom-right. Remove it,
   with its markup, when building a real site. */
.demo-switch {
  position: fixed;
  z-index: 60;
  bottom: 1rem;
  inset-inline-end: 1rem;
}

.demo-switch__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  justify-content: center;
  padding: 0 0.875rem;
  border: 0;
  border-radius: 999px;
  background: var(--c-deep);
  color: var(--c-on-color);
  font: 700 var(--fs-sm) var(--font-display);
  box-shadow: var(--shadow-float);
  cursor: pointer;
}

/* Icon-only on phones so the floating button covers less content. */
.demo-switch__text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .demo-switch__text {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
}

.demo-switch__toggle:hover {
  background: var(--c-navy-2);
}

/* The panel opens above the toggle button, its end edge in line with it
   (Bootstrap's .dropup and .dropdown-menu-end). */
.demo-switch__panel {
  --bs-dropdown-spacer: 0.75rem;
  --bs-dropdown-padding-x: var(--space-m);
  --bs-dropdown-padding-y: var(--space-m);
  --bs-dropdown-font-size: var(--fs-body);
  --bs-dropdown-color: var(--c-text);
  --bs-dropdown-bg: var(--c-white);
  --bs-dropdown-border-color: var(--c-line);
  --bs-dropdown-border-radius: var(--radius-xl);
  --bs-dropdown-link-color: var(--c-navy);
  --bs-dropdown-link-hover-color: var(--c-navy);
  --bs-dropdown-link-hover-bg: var(--c-surface);
  --bs-dropdown-link-active-color: var(--c-navy);
  --bs-dropdown-link-active-bg: var(--c-surface);
  width: min(22rem, 100vw - 2rem);
  max-height: min(36rem, 100dvh - 6rem);
  overflow-y: auto;
  box-shadow: var(--shadow-float);
}

.demo-switch__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-s);
}

.demo-switch__title {
  color: var(--c-navy);
  font: 800 1.125rem var(--font-display);
}

.demo-switch__close {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-white);
  cursor: pointer;
}

.demo-switch__groups {
  display: grid;
  gap: var(--space-m);
}

.demo-switch__group {
  margin-bottom: 0.375rem;
  color: var(--c-text-3);
  font: 700 var(--fs-xs) var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.demo-switch li + li {
  margin-top: 0.125rem;
}

.demo-switch a {
  display: block;
  padding: 0.5rem 0.75rem;
  white-space: normal;
  border-radius: var(--radius-s);
  color: var(--c-navy);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}

.demo-switch a:hover {
  background: var(--c-surface);
}

.demo-switch a[aria-current] {
  background: var(--c-tint);
  color: var(--c-primary);
}

/* Keyboard focus shows the ring alone; Bootstrap paints the hover look on :focus too. */
.demo-switch .dropdown-item:focus:not(:hover):not([aria-current]) {
  color: var(--bs-dropdown-link-color);
  background-color: transparent;
}

/* ----------------------------------------------------------------
	Demo Colour Switcher
---------------------------------------------------------------- */

/* Demo-only colour switcher: a second dropup, stacked above the Layouts button
   (1rem from the edge, plus that button and a 0.5rem gap). Its radios swap the
   file of <link id="color-scheme">. Remove it with its markup and the colour
   parts of assets/js/theme.js and functions.js when building a real site. */
.demo-switch--colors {
  bottom: 4.25rem;
}

/* The panel opens 3.25rem higher than the Layouts one, so it may be that much shorter. */
.demo-switch--colors .demo-switch__panel {
  max-height: min(36rem, 100dvh - 9.25rem);
}

.color-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Each scheme is a tile: the logo mark in its colours over its name. */
.color-switch label {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding: 0.875rem 0.25rem 0.625rem;
  border: 1.5px solid var(--c-line);
  border-radius: var(--radius-m);
  color: var(--c-navy);
  font: 600 var(--fs-sm) var(--font-display);
  cursor: pointer;
}

.color-switch label:hover {
  border-color: var(--c-line-strong);
  background: var(--c-surface);
}

.color-switch input:checked + label {
  border-color: var(--c-primary);
  background: var(--c-tint);
  color: var(--c-primary);
}

.color-switch input:focus-visible + label,
.is-tabbing .color-switch input:focus + label {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* The swatch is a .brand__mark: setting the two tokens it paints with on the
   swatch itself shows each scheme whatever the page uses. Keep these in step
   with the fill and accent in each file of assets/css/colors/. */
.color-switch__swatch--blue {
  --c-primary-fill: #1f4be0;
  --c-accent: #ff6b4a;
}

.color-switch__swatch--violet {
  --c-primary-fill: #6a35d9;
  --c-accent: #f571a4;
}

.color-switch__swatch--crimson {
  --c-primary-fill: #b20d43;
  --c-accent: #f8bd40;
}

.color-switch__swatch--orange {
  --c-primary-fill: #a13b00;
  --c-accent: #55c6f4;
}

.color-switch__swatch--green {
  --c-primary-fill: #006a3a;
  --c-accent: #b5ed60;
}

.color-switch__swatch--teal {
  --c-primary-fill: #006565;
  --c-accent: #ffb346;
}

/* The accent dot's ring takes the tile's background, as the logo's takes the header's. */
.color-switch label:hover .brand__mark::after {
  border-color: var(--c-surface);
}

.color-switch input:checked + label .brand__mark::after {
  border-color: var(--c-tint);
}

.demo-switch__note {
  margin-top: var(--space-s);
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

/* Bootstrap colours <code> pink; here the path reads as part of the note. */
.demo-switch__note code {
  color: inherit;
}

/* ================================================================
	30. Home 2 — Job Board
================================================================ */

/* ----------------------------------------------------------------
	Board Hero
---------------------------------------------------------------- */

/* The dotted stage from Home 1, full width. */
.hero-board {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(2.5rem, 2rem + 2vw, 3.5rem);
  background:
    radial-gradient(rgb(255 255 255 / 0.14) 1.5px, transparent 1.7px) 0 0 / 1.375rem 1.375rem,
    var(--c-primary-fill);
  color: var(--c-on-color);
}

.hero-board__inner {
  align-items: center;
}

.hero-badge--on-primary {
  border-color: rgb(255 255 255 / 0.22);
  background: rgb(255 255 255 / 0.12);
  color: var(--c-on-color);
  box-shadow: none;
}

.hero-badge--on-primary .icon {
  color: var(--c-accent-light);
}

.hero-board__title {
  margin-top: var(--space-m);
  color: var(--c-on-color);
}

.hero-board__lead {
  max-width: 36rem;
  margin-top: var(--space-m);
  color: rgb(255 255 255 / 0.88);
  font-size: var(--fs-lead);
}

.search-bar--board {
  max-width: 58rem;
  margin-top: var(--space-l);
  color: var(--c-text);
}

.hero-board__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-s);
}

.hero-board__quick a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 0.875rem;
  border: 1px solid rgb(255 255 255 / 0.32);
  border-radius: 999px;
  color: var(--c-on-color);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

/* Fixed white, as on .btn-outline-light: --c-white turns dark in the dark theme. */
.hero-board__quick a:hover {
  border-color: var(--c-on-color);
  background: rgb(255 255 255 / 0.12);
}

.hero-board__visual {
  position: relative;
  width: min(100%, 24rem);
  aspect-ratio: 4 / 5;
  margin-inline: auto;
}

/* ----------------------------------------------------------------
	Shift Pass
---------------------------------------------------------------- */

/* The hero is a shift ticket rather than a photo frame: the candidate steps out
   of the accent header and the perforated stub names the job she was placed in.
   The ticket starts at 12% and its rows split 8:3, so the perforation is at 76%,
   where the cut-out photo ends. */
.shift-pass {
  position: absolute;
  inset: 12% 0 0;
  display: grid;
  grid-template-rows: 8fr 3fr;
  border-radius: var(--radius-xl);
  background: var(--c-white);
  box-shadow: var(--shadow-float);
}

.shift-pass__head {
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--c-accent);
}

.shift-pass__stub {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding-inline: 1.25rem;
  border-top: 2px dashed var(--c-line);
}

/* Unlike the job ticket's, these notches are filled with the hero's primary fill so they
   read as cut-outs; change them with .hero-board's background. */
.shift-pass__stub::before,
.shift-pass__stub::after {
  content: "";
  position: absolute;
  top: -0.8125rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--c-primary-fill);
}

.shift-pass__stub::before {
  inset-inline-start: -0.75rem;
}

.shift-pass__stub::after {
  inset-inline-end: -0.75rem;
}

.shift-pass__job {
  color: var(--c-text-2);
  font-size: var(--fs-xs);
  line-height: 1.35;
}

.shift-pass__job strong {
  display: block;
  color: var(--c-navy);
  font: 800 var(--fs-sm) / 1.25 var(--font-display);
}

.shift-pass__pay {
  color: var(--c-navy);
  font: 800 1.25rem / 1 var(--font-display);
  white-space: nowrap;
}

.shift-pass__pay span {
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.shift-pass__person {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 76%;
  object-fit: contain;
  object-position: 50% 100%;
}

.shift-pass__sticker {
  position: absolute;
  z-index: 2;
  top: 30%;
  inset-inline-start: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem 0.5rem 0.75rem;
  border-radius: 999px;
  background: var(--c-deep);
  color: var(--c-on-color);
  font: 800 var(--fs-sm) var(--font-display);
  rotate: -6deg;
}

.shift-pass__sticker .icon {
  color: var(--c-mint-soft);
}

/* On phones the visual spans the full container, so the sticker stays inside the gutter. */
@media (min-width: 576px) {
  .shift-pass__sticker {
    inset-inline-start: -8%;
  }
}

/* ----------------------------------------------------------------
	Hero Figures
---------------------------------------------------------------- */

/* The 1px gaps over a translucent background draw the lines between figures. */
.hero-board__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--space-xl);
  overflow: hidden;
  border-radius: var(--radius-l);
  background: rgb(255 255 255 / 0.18);
}

.hero-board__stats > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 0.125rem;
  padding: 1rem 1.25rem;
  background: rgb(12 24 56 / 0.28);
}

.hero-board__stats dd {
  color: var(--c-on-color);
  font: 800 clamp(1.5rem, 1.25rem + 1vw, 2rem) / 1.1 var(--font-display);
  letter-spacing: -0.03em;
}

.hero-board__stats dt {
  color: rgb(255 255 255 / 0.86);
  font-size: var(--fs-sm);
}

/* Tablet and up: the search fields and button on one row. */
@media (min-width: 768px) {
  .search-bar--board {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 0.7fr) auto;
  }
}

/* Desktop: copy and search beside the shift pass; figures in one row. */
@media (min-width: 992px) {
  .hero-board__visual {
    width: 100%;
  }

  .hero-board__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ----------------------------------------------------------------
	Sector Tiles
---------------------------------------------------------------- */

.sector-tile {
  display: grid;
  justify-items: start;
  gap: 0.5rem;
  height: 100%;
  padding: 1.25rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  background: var(--c-white);
  text-decoration: none;
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.sector-tile:hover {
  border-color: var(--c-primary);
  box-shadow: var(--shadow-card);
  transform: translateY(-0.1875rem);
}

.sector-tile:hover .service__icon {
  background: var(--c-primary-fill);
  color: var(--c-on-color);
}

.sector-tile strong {
  color: var(--c-navy);
  font: 750 1.0625rem / 1.25 var(--font-display);
}

.sector-tile > span:last-child {
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

/* ----------------------------------------------------------------
	Companies Hiring
---------------------------------------------------------------- */

.employer-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  background: var(--c-white);
  transition: box-shadow var(--dur-base) var(--ease-out);
}

.employer-card:hover {
  box-shadow: var(--shadow-card);
}

.employer-card__name {
  color: var(--c-navy);
  font: 750 1.0625rem / 1.3 var(--font-display);
}

.employer-card__name a {
  text-decoration: none;
}

.employer-card p {
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.employer-card__jobs {
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  background: var(--c-tint);
  color: var(--c-primary);
  font: 700 var(--fs-xs) var(--font-display);
  white-space: nowrap;
}

/* ----------------------------------------------------------------
	App Promo
---------------------------------------------------------------- */

.app-promo {
  align-items: center;
}

.app-promo__body {
  display: grid;
  justify-items: start;
  gap: var(--space-s);
}

.app-promo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--space-xs);
}

.app-promo__visual {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding-block: var(--space-m);
}

.app-promo__visual::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(26rem, 92%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-tint);
}

/* ----------------------------------------------------------------
	Phone Mockup
---------------------------------------------------------------- */

/* Phone drawn in HTML and CSS: frame, screen, status bar, pay card and shift list. */
.phone {
  width: 17rem;
  padding: 0.75rem;
  border-radius: 2.5rem;
  background: var(--c-deep);
  box-shadow: 0 2rem 4rem -1.5rem rgb(12 24 56 / 0.5);
  rotate: -4deg;
}

.phone__screen {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 31rem;
  padding: 1rem;
  border-radius: 1.875rem;
  background: var(--c-surface);
}

.phone__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--c-navy);
  font: 700 0.75rem var(--font-display);
}

/* The camera island in the status bar. */
.phone__dots {
  width: 3.5rem;
  height: 0.875rem;
  border-radius: 999px;
  background: var(--c-deep);
}

.phone__hello {
  color: var(--c-navy);
  font: 800 1.125rem var(--font-display);
}

.phone__pay {
  display: grid;
  gap: 0.125rem;
  padding: 1rem;
  border-radius: 1rem;
  background: var(--c-primary-fill);
  color: rgb(255 255 255 / 0.9);
  font-size: 0.75rem;
}

.phone__pay strong {
  color: var(--c-on-color);
  font: 800 1.75rem / 1.1 var(--font-display);
}

.phone__label {
  color: var(--c-text-3);
  font: 700 0.75rem var(--font-display);
}

.phone__shifts {
  display: grid;
  gap: 0.5rem;
}

.phone__shifts li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem;
  border-radius: 0.75rem;
  background: var(--c-white);
  color: var(--c-text-2);
  font-size: 0.75rem;
}

.phone__shifts strong {
  display: block;
  color: var(--c-navy);
  font: 700 0.75rem var(--font-display);
}

.phone__date {
  width: 2.75rem;
  padding: 0.25rem;
  border-radius: 0.5rem;
  background: var(--c-tint);
  color: var(--c-primary);
  font: 800 0.6875rem / 1.2 var(--font-display);
  text-align: center;
}

.phone__state {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--c-mint-soft);
  color: var(--c-mint-ink);
  font: 700 0.6875rem var(--font-display);
}

.phone__state--offer {
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
}

.phone__cta {
  margin-top: auto;
  padding: 0.75rem;
  border-radius: 0.75rem;
  background: var(--c-accent);
  color: var(--c-deep);
  font: 800 0.8125rem var(--font-display);
  text-align: center;
}

/* ================================================================
	31. Home 3 — Employers
================================================================ */

/* ----------------------------------------------------------------
	Employer Hero
---------------------------------------------------------------- */

.hero-b2b {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3rem, 2rem + 5vw, 6.5rem);
  background: var(--c-deep);
  color: var(--c-on-color);
}

.hero-b2b__bg {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
}

/* Navy overlay on the photo; on desktop it lightens to the right, behind the form. */
.hero-b2b::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgb(12 24 56 / 0.88);
}

.hero-b2b__inner {
  align-items: center;
}

.hero-b2b__content {
  display: grid;
  justify-items: start;
  gap: var(--space-m);
}

.hero-b2b__title {
  color: var(--c-on-color);
}

.hero-b2b__lead {
  max-width: 36rem;
  color: rgb(255 255 255 / 0.88);
  font-size: var(--fs-lead);
}

.hero-b2b .checks li {
  color: var(--c-on-color);
}

.hero-b2b .checks__icon {
  background: var(--c-accent);
  color: var(--c-deep);
}

/* Resets the hero's white text inside the form card. */
.hero-b2b__form {
  display: grid;
  gap: var(--space-s);
  color: var(--c-text);
}

.hero-b2b__form .form-card__title {
  margin-bottom: 0;
}

.hero-b2b__note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

@media (min-width: 992px) {
  .hero-b2b::before {
    background: linear-gradient(90deg, rgb(12 24 56 / 0.95) 0%, rgb(12 24 56 / 0.85) 50%, rgb(12 24 56 / 0.45) 100%);
  }
}

/* ----------------------------------------------------------------
	Figures Band
---------------------------------------------------------------- */

/* The shared stat row on a primary-colour band. */
.stats-band {
  padding-block: clamp(2.25rem, 2rem + 2vw, 3.5rem);
  background: var(--c-primary-fill);
}

.stats-band .stat-row > div {
  background: rgb(255 255 255 / 0.1);
}

.stats-band .stat-row dd {
  color: var(--c-on-color);
}

.stats-band .stat-row dt {
  color: rgb(255 255 255 / 0.88);
}

/* ----------------------------------------------------------------
	Service Rows
---------------------------------------------------------------- */

.service-rows {
  display: grid;
  gap: clamp(2.5rem, 2rem + 3vw, 5rem);
}

.service-row {
  align-items: center;
}

.service-row__media {
  position: relative;
  isolation: isolate;
  margin: 0 1rem 1rem 0;
}

.service-row__media::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1rem -1rem -1rem 1rem;
  border-radius: var(--radius-xl);
  background: var(--c-tint);
}

/* Alternate rows: accent backdrop, and the photo moves right on desktop. */
.service-row--flip .service-row__media::before {
  background: var(--c-accent-soft);
}

.service-row__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-xl);
}

.service-row__body {
  display: grid;
  justify-items: start;
  gap: var(--space-s);
}

.service-row__title {
  color: var(--c-navy);
  font: 800 clamp(1.5rem, 1.3rem + 0.8vw, 2rem) / 1.15 var(--font-display);
  letter-spacing: -0.02em;
}

.service-row__body > p {
  max-width: 34rem;
  color: var(--c-text-2);
  font-size: 1.0625rem;
}

/* ----------------------------------------------------------------
	Sector Team Chips
---------------------------------------------------------------- */

.chip-list--large a {
  padding: 0.875rem 1.25rem;
  font-size: 1rem;
}

/* ----------------------------------------------------------------
	Case Study Cards
---------------------------------------------------------------- */

.case-cards {
  margin-bottom: var(--space-xl);
}

.case-card {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: var(--space-l);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  background: var(--c-white);
}

.case-card__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--c-navy);
  font: 750 1rem var(--font-display);
}

.case-card__metric {
  margin-top: var(--space-s);
  color: var(--c-primary);
  font: 800 3rem / 1 var(--font-display);
  letter-spacing: -0.04em;
}

.case-card__metric-label {
  color: var(--c-navy);
  font: 700 var(--fs-sm) var(--font-display);
}

.case-card > p:not([class]) {
  color: var(--c-text-2);
}

.case-card .service__link {
  margin-top: var(--space-xs);
}

/* ================================================================
	32. Home 4 — Photo-Led
================================================================ */

/* ----------------------------------------------------------------
	Photo Hero
---------------------------------------------------------------- */

/* The large bottom padding makes room for the search card that overlaps the hero. */
.hero-photo {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(34rem, 26rem + 22vw, 46rem);
  padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(6.5rem, 5rem + 4vw, 8.5rem);
  overflow: hidden;
  background: var(--c-deep);
  color: var(--c-on-color);
}

.hero-photo__bg {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 40%;
}

/* Overlay darkest at the bottom, behind the text; on desktop it also darkens the left. */
.hero-photo::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(0deg, rgb(12 24 56 / 0.92) 10%, rgb(12 24 56 / 0.55) 60%, rgb(12 24 56 / 0.3));
}

.hero-photo__inner {
  position: relative;
  display: grid;
  justify-items: start;
  gap: var(--space-m);
}

.hero-photo__title {
  max-width: 12ch;
  color: var(--c-on-color);
  font-size: clamp(3rem, 1.8rem + 5vw, 6rem);
}

.hero-photo__lead {
  max-width: 34rem;
  color: rgb(255 255 255 / 0.9);
  font-size: var(--fs-lead);
}

.hero-photo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero-photo__stat {
  display: grid;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-l);
  background: var(--c-white);
  color: var(--c-text-2);
  box-shadow: var(--shadow-float);
  font-size: var(--fs-sm);
}

.hero-photo__stat strong {
  color: var(--c-primary);
  font: 800 2rem / 1 var(--font-display);
  letter-spacing: -0.03em;
}

@media (min-width: 992px) {
  .hero-photo::before {
    background:
      linear-gradient(90deg, rgb(12 24 56 / 0.9), rgb(12 24 56 / 0.55) 50%, rgb(12 24 56 / 0.1)),
      linear-gradient(0deg, rgb(12 24 56 / 0.6), transparent 40%);
  }

  .hero-photo__stat {
    position: absolute;
    bottom: 0;
    inset-inline-end: 0;
  }
}

/* ----------------------------------------------------------------
	Overlapping Search
---------------------------------------------------------------- */

/* Pulled up over the hero's bottom edge. */
.search-overlap {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-s);
  margin-top: -3.75rem;
}

.search-overlap .search-bar {
  max-width: none;
}

/* ----------------------------------------------------------------
	Large Figures
---------------------------------------------------------------- */

.big-stats {
  display: grid;
  gap: var(--space-xl);
}

.big-stats > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--space-s);
  padding-top: var(--space-m);
  border-top: 3px solid var(--c-primary);
}

.big-stats dd {
  color: var(--c-navy);
  font: 800 clamp(3.5rem, 2.5rem + 4vw, 6rem) / 0.9 var(--font-display);
  letter-spacing: -0.05em;
}

.big-stats dd span {
  color: var(--c-accent-ink);
  font-size: 0.45em;
  letter-spacing: -0.02em;
}

.big-stats dt {
  max-width: 22rem;
  color: var(--c-text-2);
}

@media (min-width: 992px) {
  .big-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ----------------------------------------------------------------
	Sector Mosaic
---------------------------------------------------------------- */

/* Fixed row height. The first tile spans the full width on phones and a 2 x 2
   block on desktop. */
.mosaic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 11rem;
  gap: var(--grid-gap);
}

.mosaic__item {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  padding: var(--space-m);
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--c-deep);
}

.mosaic__item--1 {
  grid-column: 1 / -1;
}

.mosaic__item img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.mosaic__item::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgb(12 24 56 / 0) 45%, rgb(12 24 56 / 0.85));
}

.mosaic__item:hover img {
  transform: scale(1.06);
}

.mosaic__caption {
  display: grid;
  gap: 0.25rem;
  color: var(--c-on-color);
  font: 800 1.25rem / 1.2 var(--font-display);
  text-decoration: none;
}

.mosaic__caption span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: rgb(255 255 255 / 0.88);
  font: 700 var(--fs-sm) var(--font-display);
}

@media (min-width: 992px) {
  .mosaic {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 14rem;
  }

  .mosaic__item--1 {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* ----------------------------------------------------------------
	Quote Split
---------------------------------------------------------------- */

.big-quote {
  display: grid;
  align-content: space-between;
  gap: var(--space-l);
  padding: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  background: var(--c-white);
}

.big-quote::before {
  content: "“";
  color: var(--c-accent);
  font: 800 5rem / 0.6 var(--font-display);
}

.big-quote blockquote {
  margin: 0;
  color: var(--c-navy);
  font: 750 clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem) / 1.3 var(--font-display);
  letter-spacing: -0.02em;
}

.big-quote figcaption {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.big-quote figcaption img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
}

.big-quote figcaption strong {
  display: block;
  color: var(--c-navy);
  font-family: var(--font-display);
}

.big-quote--navy {
  border-color: var(--c-deep);
  background: var(--c-deep);
}

.big-quote--navy blockquote,
.big-quote--navy figcaption strong {
  color: var(--c-on-color);
}

.big-quote--navy figcaption {
  color: var(--c-on-dark-2);
}

/* ----------------------------------------------------------------
	Sector List
---------------------------------------------------------------- */

.sector-links {
  border-top: 1px solid var(--c-line);
}

.sector-link {
  border-bottom: 1px solid var(--c-line);
}

.sector-link__a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-m);
  padding-block: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  color: var(--c-navy);
  text-decoration: none;
}

.sector-link__name {
  font: 800 clamp(1.5rem, 1.1rem + 2vw, 2.75rem) / 1.1 var(--font-display);
  letter-spacing: -0.03em;
  transition:
    color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.sector-link__count {
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}

.sector-link__go {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1.5px solid var(--c-line-strong);
  border-radius: 50%;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    rotate var(--dur-base) var(--ease-out);
}

/* Preview photo shown beside the hovered or focused sector from 768px; hidden on phones. */
.sector-link__img {
  display: none;
}

.sector-link__a:hover .sector-link__name,
.sector-link__a:focus-visible .sector-link__name {
  color: var(--c-primary);
  transform: translateX(0.5rem);
}

.sector-link__a:hover .sector-link__go {
  border-color: var(--c-accent);
  background: var(--c-accent);
  rotate: -45deg;
}

@media (min-width: 768px) {
  .sector-link__img {
    position: absolute;
    z-index: 2;
    top: 50%;
    inset-inline-end: 9rem;
    display: block;
    width: 11rem;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-float);
    opacity: 0;
    pointer-events: none;
    scale: 0.9;
    translate: 0 -40%;
    transition:
      opacity var(--dur-base) var(--ease-out),
      scale var(--dur-base) var(--ease-out),
      translate var(--dur-base) var(--ease-out);
  }

  .sector-link__a:hover .sector-link__img,
  .sector-link__a:focus-visible .sector-link__img {
    opacity: 1;
    scale: 1;
    translate: 0 -50%;
  }
}

/* ----------------------------------------------------------------
	Accent Call Band
---------------------------------------------------------------- */

.cta-accent {
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
  background: var(--c-accent);
  color: var(--c-deep);
}

.cta-accent__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-l);
}

.cta-accent__title {
  max-width: 14ch;
  color: var(--c-deep);
  font: 800 clamp(2.25rem, 1.5rem + 3vw, 4rem) / 1 var(--font-display);
  letter-spacing: -0.04em;
}

.cta-accent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ================================================================
	33. Home 5 — Local Branches
================================================================ */

/* ----------------------------------------------------------------
	Local Hero
---------------------------------------------------------------- */

.hero-local {
  overflow-x: clip;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  border-bottom: 1px solid var(--c-line);
  background:
    radial-gradient(45% 70% at 90% 30%, var(--c-tint), transparent 70%),
    var(--c-white);
}

.hero-local__inner {
  align-items: center;
}

.hero-local__content {
  display: grid;
  justify-items: start;
  gap: var(--space-m);
}

.hero-local__lead {
  max-width: 34rem;
  color: var(--c-text-2);
  font-size: var(--fs-lead);
}

.hero-local__cities a {
  padding: 0.375rem 0.75rem;
  font-size: var(--fs-xs);
}

.hero-local__visual {
  position: relative;
}

.map-card--hero-local {
  width: min(100%, 26rem);
  margin-inline: auto;
  box-shadow: var(--shadow-card);
}

/* ----------------------------------------------------------------
	Branch Address Card
---------------------------------------------------------------- */

/* Branch address card: under the map on phones, over its bottom-left corner on desktop. */
.branch-pop {
  display: grid;
  gap: 0.25rem;
  width: min(100%, 18rem);
  margin: var(--space-s) auto 0;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-l);
  background: var(--c-white);
  box-shadow: var(--shadow-float);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

/* "Open now" is static text; working it out from the opening hours needs a script. */
.branch-pop__state {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--c-mint-ink);
  font: 700 var(--fs-xs) var(--font-display);
}

.branch-pop__state span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

.branch-pop__title {
  color: var(--c-navy);
  font: 800 1.125rem var(--font-display);
}

/* Branch details and Directions side by side, wrapping when narrow. */
.branch-pop__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 0.375rem;
}

@media (min-width: 992px) {
  .branch-pop {
    position: absolute;
    bottom: 2rem;
    inset-inline-start: 0;
    margin: 0;
  }
}

/* ----------------------------------------------------------------
	Rating & Reviews
---------------------------------------------------------------- */

.reviews {
  align-items: start;
}

.rating {
  display: grid;
  gap: var(--space-s);
  padding: var(--space-l);
  border-radius: var(--radius-xl);
  background: var(--c-tint);
}

.rating__title {
  color: var(--c-navy);
  font: 800 1.75rem / 1.15 var(--font-display);
}

.rating .quote__stars .icon {
  --icon: 1.5rem;
}

.rating__count {
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.rating__bars {
  display: grid;
  gap: 0.5rem;
}

.rating__bars li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 2.5rem;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-text-2);
  font-size: var(--fs-xs);
}

.rating__bar {
  height: 0.5rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--c-white);
}

/* Each bar's width comes from an inline --w percentage. */
.rating__bar span {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: var(--c-primary-fill);
}

/* ================================================================
	34. About 2
================================================================ */

/* ----------------------------------------------------------------
	Collage Hero
---------------------------------------------------------------- */

.hero-collage {
  overflow-x: clip;
  padding-block: clamp(2rem, 1.5rem + 3vw, 4.5rem);
  border-bottom: 1px solid var(--c-line);
  background:
    radial-gradient(40% 60% at 80% 20%, var(--c-tint), transparent 70%),
    var(--c-white);
}

.hero-collage__inner {
  align-items: center;
}

.hero-collage__content {
  display: grid;
  justify-items: start;
  gap: var(--space-s);
}

.hero-collage__content .breadcrumb {
  margin-bottom: var(--space-xs);
}

/* Three overlapping photos placed in percentages of the box, plus an accent dot
   and a spark. */
.collage {
  position: relative;
  isolation: isolate;
  width: min(100%, 34rem);
  aspect-ratio: 1 / 0.9;
  margin-inline: auto;
}

.collage img {
  position: absolute;
  max-width: none;
  object-fit: cover;
  border: 0.375rem solid var(--c-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.collage__a {
  top: 0;
  left: 0;
  width: 66%;
  height: 56%;
}

.collage__b {
  top: 16%;
  right: 0;
  width: 40%;
  height: 70%;
}

.collage__c {
  bottom: 0;
  left: 10%;
  width: 46%;
  height: 38%;
}

.collage__dot {
  position: absolute;
  z-index: -1;
  right: 30%;
  bottom: -2%;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-accent);
}

.collage__spark {
  position: absolute;
  top: -3%;
  right: 6%;
  color: var(--c-accent);
  font-size: 1.75rem;
}

/* ----------------------------------------------------------------
	Mission Statement
---------------------------------------------------------------- */

.mission {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  background: var(--c-primary-fill);
  color: var(--c-on-color);
}

/* A large, faint logo chevron, as in .results. */
.mission::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -6rem;
  inset-inline-end: -6rem;
  width: 30rem;
  aspect-ratio: 1;
  background: rgb(255 255 255 / 0.06);
  clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%);
}

.mission__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-l);
  text-align: center;
}

.mission__text {
  max-width: 28ch;
  font: 800 clamp(1.75rem, 1.2rem + 2.4vw, 3rem) / 1.2 var(--font-display);
  letter-spacing: -0.03em;
}

.mission__by {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  color: var(--c-on-dark-2);
  font-size: var(--fs-sm);
  text-align: start;
}

.mission__by img {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 20%;
}

.mission__by strong {
  display: block;
  color: var(--c-on-color);
  font-family: var(--font-display);
}

/* ----------------------------------------------------------------
	Numbers
---------------------------------------------------------------- */

.numbers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-l) var(--grid-gap);
}

.numbers > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 0.25rem;
  padding-inline-start: var(--space-m);
  border-inline-start: 3px solid var(--c-accent);
}

.numbers dd {
  color: var(--c-navy);
  font: 800 clamp(2.25rem, 1.75rem + 2vw, 3.5rem) / 1 var(--font-display);
  letter-spacing: -0.04em;
}

.numbers dt {
  color: var(--c-text-2);
}

@media (min-width: 992px) {
  .numbers {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ----------------------------------------------------------------
	Promises
---------------------------------------------------------------- */

.promise {
  display: grid;
  align-content: start;
  gap: var(--space-s);
  padding: var(--space-l);
  border-radius: var(--radius-xl);
  background: var(--c-white);
}

.promise__num {
  color: var(--c-primary);
  font: 800 2.5rem / 1 var(--font-display);
  letter-spacing: -0.04em;
}

.promise h3 {
  color: var(--c-navy);
  font: 800 1.375rem / 1.2 var(--font-display);
}

.promise p {
  color: var(--c-text-2);
}

/* ----------------------------------------------------------------
	Team Cards
---------------------------------------------------------------- */

.team-card {
  position: relative;
  isolation: isolate;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--c-deep);
}

.team-card__photo {
  position: absolute;
  z-index: -2;
  inset: 0;
}

.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
  transition: transform var(--dur-slow) var(--ease-out);
}

.team-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgb(12 24 56 / 0) 45%, rgb(12 24 56 / 0.88));
}

.team-card:hover .team-card__photo img {
  transform: scale(1.05);
}

/* The end padding keeps the text clear of the round link. */
.team-card__body {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  gap: 0.125rem;
  padding: var(--space-m);
  padding-inline-end: 3.75rem;
  color: var(--c-on-color);
}

.team-card__name {
  font: 800 1.125rem / 1.25 var(--font-display);
}

.team-card__role {
  color: rgb(255 255 255 / 0.88);
  font-size: var(--fs-xs);
}

.team-card__link {
  position: absolute;
  bottom: var(--space-m);
  inset-inline-end: var(--space-m);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-navy);
}

.team-card__tag {
  justify-self: start;
  margin-top: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: var(--c-accent);
  color: var(--c-deep);
  font: 700 var(--fs-xs) var(--font-display);
}

/* ----------------------------------------------------------------
	Branch Map Strip
---------------------------------------------------------------- */

.map-strip {
  align-items: center;
}

.map-strip .map-card {
  width: min(100%, 24rem);
  margin-inline: auto;
}

.map-strip__body {
  display: grid;
  justify-items: start;
  gap: var(--space-s);
}

/* Branch details and Directions side by side, wrapping when narrow. */
.map-strip__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

/* ----------------------------------------------------------------
	Accreditations Grid
---------------------------------------------------------------- */

.accred-title {
  margin-bottom: var(--space-m);
  text-align: center;
}

.accred {
  display: grid;
  justify-items: center;
  gap: 0.375rem;
  padding: var(--space-l) var(--space-m);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  text-align: center;
}

.accred-grid .icon {
  --icon: 2rem;
  color: var(--c-primary);
}

.accred-grid strong {
  color: var(--c-navy);
  font: 800 1rem var(--font-display);
}

/* ================================================================
	35. Jobs — List and Map Views
================================================================ */

/* ----------------------------------------------------------------
	Filter Bar
---------------------------------------------------------------- */

/* Inline filters on the list view. */
.filter-bar {
  display: grid;
  gap: var(--space-s);
  margin-bottom: var(--space-l);
  padding: var(--space-m);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  background: var(--c-surface);
}

.filter-bar__field {
  display: grid;
  gap: 0.375rem;
}

.filter-bar__field label {
  color: var(--c-navy);
  font: 700 var(--fs-xs) var(--font-display);
}

.filter-bar .form-select {
  width: 100%;
}

.filter-bar .btn {
  min-height: 2.75rem;
}

@media (min-width: 768px) {
  .filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .filter-bar {
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    align-items: end;
  }
}

/* ----------------------------------------------------------------
	Job Alert Strip
---------------------------------------------------------------- */

.alert-strip {
  display: grid;
  gap: var(--space-s);
  align-items: center;
  padding: var(--space-m) var(--space-l);
  border-radius: var(--radius-l);
  background: var(--c-deep);
  color: var(--c-on-color);
}

.alert-strip__title {
  font: 800 1.25rem var(--font-display);
}

.alert-strip p {
  color: var(--c-on-dark-2);
}

.alert-strip__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.alert-strip__form .form-control {
  flex: 1 1 14rem;
  width: auto;
}

/* Desktop: icon, text and form on one row. */
@media (min-width: 992px) {
  .alert-strip {
    grid-template-columns: auto minmax(0, 1fr) minmax(24rem, auto);
  }

  .alert-strip__form {
    flex-wrap: nowrap;
  }
}

/* ----------------------------------------------------------------
	Map View
---------------------------------------------------------------- */

.page-hero--map .view-switch {
  margin-top: var(--space-xs);
}

.map-split {
  align-items: start;
}

/* Phones: the map shows above the list, although it follows it in the markup. */
.map-split__map {
  order: -1;
}

.map-split__map .geo-map {
  --map-h: 22rem;
}

/* ----------------------------------------------------------------
	Area Groups
---------------------------------------------------------------- */

.map-group + .map-group {
  margin-top: var(--space-l);
}

.map-group__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-s);
  color: var(--c-navy);
  font: 800 1.125rem var(--font-display);
}

.map-group__title .icon {
  color: var(--c-accent-ink);
}

.map-group__list {
  display: grid;
  gap: 0.75rem;
}

/* ----------------------------------------------------------------
	Mini Job Card
---------------------------------------------------------------- */

/* Map clusters link to these cards: scroll-margin keeps the card clear of the
   header and :target highlights it. */
.job-mini {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  background: var(--c-white);
  scroll-margin-top: calc(var(--header-h) + 1rem);
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.job-mini:hover,
.job-mini:focus-within,
.job-mini:target {
  border-color: var(--c-primary);
  box-shadow: var(--shadow-card);
}

.job-mini__title {
  color: var(--c-navy);
  font: 750 1.0625rem / 1.25 var(--font-display);
}

.job-mini__title a {
  text-decoration: none;
}

.job-mini__body p {
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.job-mini__body .job-mini__tags {
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

.job-mini__pay {
  color: var(--c-navy);
  font: 800 1.125rem var(--font-display);
  white-space: nowrap;
}

.job-mini__pay span {
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* ----------------------------------------------------------------
	Map Clusters
---------------------------------------------------------------- */

/* Area bubble with a job count, linking to the first job in its area. */
.geo-map__cluster.maplibregl-marker {
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  background: var(--c-primary-fill);
  box-shadow: 0 0 0 3px var(--c-white), 0 4px 10px rgb(12 24 56 / 0.25);
  color: var(--c-on-color);
  font: 800 0.875rem / 1 var(--font-display);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.geo-map__cluster.maplibregl-marker:hover,
.geo-map__cluster.maplibregl-marker:focus-visible {
  background: var(--c-accent);
  color: var(--c-deep);
}

.geo-map__cluster.maplibregl-marker:focus-visible {
  outline-offset: 4px;
}

/* Hovering or focusing a job lights up its area on the map — :has() keeps
   the list and the map in sync without script. A new area needs a line here:
   data-area on its jobs, data-pin on its cluster. */
.map-split:has([data-area="wy"]:hover, [data-area="wy"]:focus-within) [data-pin="wy"],
.map-split:has([data-area="man"]:hover, [data-area="man"]:focus-within) [data-pin="man"],
.map-split:has([data-area="she"]:hover, [data-area="she"]:focus-within) [data-pin="she"],
.map-split:has([data-area="bhm"]:hover, [data-area="bhm"]:focus-within) [data-pin="bhm"],
.map-split:has([data-area="brs"]:hover, [data-area="brs"]:focus-within) [data-pin="brs"],
.map-split:has([data-area="lon"]:hover, [data-area="lon"]:focus-within) [data-pin="lon"] {
  background: var(--c-accent);
  color: var(--c-deep);
}

/* Desktop: list and map side by side; the map sticks and fits the viewport height. */
@media (min-width: 992px) {
  .map-split__map {
    position: sticky;
    top: calc(var(--header-h) + var(--space-m));
    order: 0;
  }

  .map-split__map .geo-map {
    --map-h: max(22rem, calc(100dvh - var(--header-h) - 8rem));
  }
}

/* ================================================================
	36. Job Detail — Banner and Summary Layouts
================================================================ */

/* ----------------------------------------------------------------
	Job Banner
---------------------------------------------------------------- */

/* Job detail layout 2 (banner). The apply bar, fact tiles, employer box and
   consultant strip below belong to the same layout. */
.job-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(3rem, 2.5rem + 3vw, 5rem);
  background: var(--c-deep);
  color: var(--c-on-color);
}

.job-banner__bg {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.job-banner::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgb(12 24 56 / 0.75), rgb(12 24 56 / 0.92));
}

.job-banner__inner {
  display: grid;
  justify-items: start;
  gap: var(--space-s);
}

/* Breadcrumb recoloured for the dark banner. */
.job-banner .breadcrumb {
  --bs-breadcrumb-divider-color: rgb(255 255 255 / 0.45);
  --bs-breadcrumb-item-active-color: var(--c-on-color);
  color: rgb(255 255 255 / 0.85);
}

.job-banner .breadcrumb a {
  color: rgb(255 255 255 / 0.9);
}

.job-banner__org {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: var(--space-s);
  font: 700 1.0625rem var(--font-display);
}

.job-banner__title {
  color: var(--c-on-color);
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
}

.job-banner__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.job-banner__tags li {
  padding: 0.4375rem 0.875rem;
  border: 1px solid rgb(255 255 255 / 0.24);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.12);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* ----------------------------------------------------------------
	Sticky Apply Bar
---------------------------------------------------------------- */

/* Sticks under the header (z-index 40, one below it). Phones get the pay and
   buttons; the job title joins from 768px. */
.apply-bar {
  position: sticky;
  z-index: 40;
  top: var(--header-h);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-white);
  box-shadow: 0 0.75rem 1.5rem -1.25rem rgb(12 24 56 / 0.35);
}

.apply-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  min-height: 4.5rem;
}

.apply-bar__job {
  display: none;
}

.apply-bar__pay {
  margin-inline-end: auto;
  color: var(--c-navy);
  font: 800 1.375rem / 1 var(--font-display);
  white-space: nowrap;
}

.apply-bar__pay span {
  color: var(--c-text-3);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.apply-bar .save {
  margin-inline-start: 0;
}

@media (min-width: 768px) {
  .apply-bar__inner {
    gap: var(--space-m);
  }

  .apply-bar__job {
    display: grid;
    flex: 1;
    min-width: 0;
  }

  .apply-bar__job strong {
    overflow: hidden;
    color: var(--c-navy);
    font: 800 1.0625rem var(--font-display);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .apply-bar__job span {
    overflow: hidden;
    color: var(--c-text-2);
    font-size: var(--fs-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .apply-bar__pay {
    margin-inline-end: 0;
  }
}

/* ----------------------------------------------------------------
	Fact Tiles
---------------------------------------------------------------- */

.fact-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: var(--space-xl);
}

.fact-tiles > div {
  display: grid;
  align-content: start;
  gap: 0.375rem;
  padding: 1rem;
  border-radius: var(--radius-l);
  background: var(--c-surface);
}

.fact-tiles dt {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-text-2);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.fact-tiles dt .icon {
  --icon: 1.125rem;
  color: var(--c-primary);
}

.fact-tiles dd {
  color: var(--c-navy);
  font: 750 1rem / 1.3 var(--font-display);
}

@media (min-width: 768px) {
  .fact-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ----------------------------------------------------------------
	Employer Box
---------------------------------------------------------------- */

.employer-box {
  display: flex;
  align-items: flex-start;
  gap: var(--space-m);
  margin-block: var(--space-l);
  padding: var(--space-l);
  border-radius: var(--radius-xl);
  background: var(--c-tint);
}

.employer-box__title {
  margin-bottom: 0.375rem;
  color: var(--c-navy);
  font: 800 1.25rem var(--font-display);
}

.employer-box p {
  color: var(--c-text-2);
}

.employer-box a {
  color: var(--c-primary);
  font-weight: 600;
}

/* ----------------------------------------------------------------
	Consultant Strip
---------------------------------------------------------------- */

.consultant-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-m);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
}

.consultant-strip__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ----------------------------------------------------------------
	Apply Form Card
---------------------------------------------------------------- */

.apply-form--card {
  margin-top: var(--space-xl);
}

/* Apply now links jump here on every job page; the extra 5.5rem clears layout
   2's sticky apply bar (4.5rem). */
#apply {
  scroll-margin-top: calc(var(--header-h) + 5.5rem);
}

/* ----------------------------------------------------------------
	Job Top Bar
---------------------------------------------------------------- */

/* Job detail layout 3 (summary): a back link bar, then the summary card, section
   nav and content cards. */
.job-top {
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-surface);
}

.job-top__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
}

.job-top__back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--c-navy);
  font: 700 var(--fs-sm) var(--font-display);
  text-decoration: none;
}

/* An arrow-right icon turned to point back. */
.job-top__back .icon {
  rotate: 180deg;
}

.job-top__back:hover {
  color: var(--c-primary);
}

/* ----------------------------------------------------------------
	Summary Card
---------------------------------------------------------------- */

.summary-card {
  display: grid;
  gap: var(--space-s);
  padding: var(--space-l);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

.summary-card__head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.summary-card__title {
  color: var(--c-navy);
  font: 800 1.75rem / 1.15 var(--font-display);
  letter-spacing: -0.02em;
}

.summary-card__org {
  color: var(--c-text-2);
  font-weight: 600;
}

.summary-card__loc {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.summary-card .apply-card__pay {
  margin-top: var(--space-xs);
}

.summary-card__contact {
  display: grid;
  gap: 0.75rem;
  padding-top: var(--space-s);
  border-top: 1px solid var(--c-line);
}

.summary-card__contact p {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.summary-card__contact p a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--c-navy);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* ----------------------------------------------------------------
	Section Navigation
---------------------------------------------------------------- */

/* Sticky in-page navigation; on phones it scrolls sideways instead of wrapping. */
.section-nav {
  position: sticky;
  z-index: 10;
  top: calc(var(--header-h) + 0.5rem);
  margin-bottom: var(--space-m);
  padding: 0.375rem;
  overflow-x: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  background: var(--c-white);
}

.section-nav ul {
  display: flex;
  gap: 0.25rem;
  white-space: nowrap;
}

.section-nav a {
  display: block;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-m);
  color: var(--c-text-2);
  font: 700 var(--fs-sm) var(--font-display);
  text-decoration: none;
}

.section-nav a:hover {
  background: var(--c-tint);
  color: var(--c-primary);
}

/* ----------------------------------------------------------------
	Content Cards
---------------------------------------------------------------- */

/* The section nav links jump to these cards; scroll-margin clears the header and
   the sticky nav. */
.content-card {
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  background: var(--c-white);
  scroll-margin-top: calc(var(--header-h) + 5rem);
}

.content-card + .content-card {
  margin-top: var(--space-m);
}

.content-card h2 {
  margin-bottom: var(--space-s);
  color: var(--c-navy);
  font: 800 1.375rem / 1.25 var(--font-display);
}

.content-card > p {
  color: var(--c-text);
  font-size: 1.0625rem;
}

.content-card .content-card__posted {
  margin-top: var(--space-s);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.content-card__posted a {
  color: var(--c-primary);
  font-weight: 600;
}

/* ================================================================
	37. Help and Style Guide Pages
================================================================ */

/* ----------------------------------------------------------------
	FAQ Topics
---------------------------------------------------------------- */

/* faq.html: each topic is a title with its icon tile, then its accordion. */
.faq-topic + .faq-topic {
  margin-top: var(--space-2xl);
}

.faq-topic__title {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
  color: var(--c-navy);
  font: 800 clamp(1.5rem, 1.3rem + 0.8vw, 2rem) / 1.15 var(--font-display);
  letter-spacing: -0.02em;
}

/* The tile's bottom margin is for cards; beside a title it would push it up. */
.faq-topic__title .service__icon {
  margin-bottom: 0;
}

/* The questions box spans the accordions' width. */
.faq-topics .author-box {
  max-width: none;
  margin-top: var(--space-2xl);
}

/* On a grey band the author box takes the page colour, or it would vanish. */
.section--surface .author-box {
  background: var(--c-white);
}

/* ----------------------------------------------------------------
	Style Guide Index
---------------------------------------------------------------- */

/* Cards under the title of elements.html and typography.html, one per section:
   the Next Links cards (28. Confirmation and Error States) with an icon tile. */
.guide-index .next-links {
  margin-top: 0;
}

.guide-index .service__icon {
  width: 2.75rem;
  height: 2.75rem;
}

.guide-index a:hover .service__icon {
  background: var(--c-primary-fill);
  color: var(--c-on-color);
}

/* ----------------------------------------------------------------
	Style Guide Sections
---------------------------------------------------------------- */

/* "Back to the index" at the end of each section head. */
.guide-top {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-text-2);
  font: 700 var(--fs-sm) var(--font-display);
  text-decoration: none;
}

.guide-top:hover {
  color: var(--c-primary);
  text-decoration: underline;
}

/* One demo: a small label and the classes that build it, then the markup. */
.guide-item + .guide-item {
  margin-top: var(--space-2xl);
}

.guide-label {
  margin-bottom: var(--space-m);
  color: var(--c-text-3);
  font: 700 var(--fs-xs) var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.guide-label:has(+ .guide-classes) {
  margin-bottom: 0.5rem;
}

.guide-classes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: var(--space-m);
}

.guide-classes code {
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  background: var(--c-tint);
  color: var(--c-primary);
  font-size: var(--fs-xs);
}

/* Several demos in one item keep apart. */
.guide-item > :not(.guide-label):not(.guide-classes) + * {
  margin-top: var(--space-m);
}

.guide-item > .cv-banner {
  margin-top: 0;
}

/* A row of small demos that wraps. */
.guide-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

/* In a ticket the save toggle is pushed to the end of its row; here it lines up. */
.guide-row > .save {
  margin-inline-start: 0;
}

.guide-row > .guide-narrow {
  flex: 1 1 16rem;
}

/* A box behind a demo that needs the other background: the page colour on a
   grey band, or grey on a white one. */
.guide-canvas {
  padding: var(--space-m);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  background: var(--c-white);
}

.guide-canvas--surface {
  border-color: transparent;
  background: var(--c-surface);
}

/* A navy panel for the demos made for dark bands and photos; navy in both themes. */
.guide-dark {
  padding: var(--space-m);
  border-radius: var(--radius-l);
  background: var(--c-deep);
  color: var(--c-on-color);
}

/* Width caps for demos that fill their box: a button, a search bar, a form. */
.guide-narrow {
  max-width: 22rem;
}

.guide-narrow--wide {
  max-width: 52rem;
}

.guide-narrow--form {
  max-width: 50rem;
}

/* Demos side by side: Bootstrap rows with the theme's card gap. */
.guide-cols {
  --bs-gutter-x: var(--grid-gap);
  --bs-gutter-y: var(--space-l);
}

.guide-stack {
  display: grid;
  align-content: start;
  gap: var(--space-m);
}

.guide-stack .author-box {
  margin-top: 0;
}

/* Full-width bands shown inside a section, rounded like a card. */
.guide-frame {
  overflow: hidden;
  border-radius: var(--radius-xl);
}

/* Running text at a readable line length. */
.guide-measure {
  display: grid;
  gap: var(--space-s);
  max-width: 44rem;
}

/* The slider demo sits on a navy panel, where its white arrows and dots belong.
   Once the script shows them, the scrollbar is only clutter, as on Home 1. */
.guide-slider:has(.scroller-nav:not([hidden])) .scroller {
  scrollbar-width: none;
}

/* ----------------------------------------------------------------
	Colour Swatches
---------------------------------------------------------------- */

/* Each chip is painted with its own token (--swatch, set inline), so it shows
   the value of the theme in use; the text gives both values. */
.swatches {
  --bs-gutter-x: var(--space-s);
  --bs-gutter-y: var(--space-m);
}

.swatch {
  display: grid;
  gap: 0.375rem;
}

.swatch__chip {
  height: 4.5rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  background: var(--swatch);
}

.swatch code,
.icon-tile code {
  color: var(--c-navy);
  font-size: var(--fs-xs);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.swatch__values {
  display: grid;
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

/* A colour scheme: its logo mark, name, file and two colours. */
.scheme-tile {
  display: grid;
  justify-items: start;
  gap: 0.25rem;
  height: 100%;
  padding: var(--space-s);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
}

.scheme-tile .brand__mark {
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.scheme-tile strong {
  color: var(--c-navy);
  font: 750 1rem var(--font-display);
}

.scheme-tile code {
  color: var(--c-text-2);
  font-size: var(--fs-xs);
}

.scheme-tile span:last-child {
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

/* ----------------------------------------------------------------
	Icon Tiles
---------------------------------------------------------------- */

.icon-tiles {
  --bs-gutter-x: var(--space-s);
  --bs-gutter-y: var(--space-s);
}

.icon-tile {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.25rem;
  height: 100%;
  padding: var(--space-s) 0.5rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  background: var(--c-white);
  text-align: center;
}

.icon-tile .service__icon {
  width: 2.75rem;
  height: 2.75rem;
}

.icon-tile .icon {
  --icon: 1.5rem;
}

.icon-tile__style {
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

/* ----------------------------------------------------------------
	Typefaces
---------------------------------------------------------------- */

.typeface {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  height: 100%;
  padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  background: var(--c-white);
}

.typeface__aa {
  color: var(--c-primary);
  font: 800 clamp(4.5rem, 3.5rem + 4vw, 7rem) / 1 var(--font-display);
  letter-spacing: -0.04em;
}

.typeface__name {
  color: var(--c-navy);
  font: 800 1.5rem / 1.2 var(--font-display);
}

.typeface__role {
  color: var(--c-text-2);
}

.typeface__chars {
  margin-top: var(--space-s);
  color: var(--c-navy);
  font: 500 1.125rem / 1.6 var(--font-display);
  overflow-wrap: anywhere;
}

/* The Text card shows Red Hat Text in place of Display. */
.typeface--text .typeface__aa,
.typeface--text .typeface__chars {
  font-family: var(--font-text);
}

.typeface--text .typeface__aa {
  font-weight: 500;
}

/* Every weight of one family, light to black, a line each. */
.type-weights li {
  display: flex;
  align-items: baseline;
  gap: var(--space-m);
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--c-line);
}

.type-weights__num {
  flex: none;
  width: 2.5rem;
  color: var(--c-text-3);
  font: 700 var(--fs-xs) var(--font-display);
}

.type-weights__sample {
  min-width: 0;
  color: var(--c-navy);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  line-height: 1.25;
}

.type-weights--display .type-weights__sample {
  font-family: var(--font-display);
}

/* ----------------------------------------------------------------
	Type Scale
---------------------------------------------------------------- */

/* A row per text style: its name, class and figures, then a sample; side by
   side from 768px. */
.type-scale li {
  display: grid;
  gap: var(--space-s);
  padding-block: var(--space-l);
  border-bottom: 1px solid var(--c-line);
}

.type-scale li:first-child {
  padding-top: 0;
}

.type-scale__meta {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.25rem;
}

.type-scale__meta strong {
  color: var(--c-navy);
  font: 750 1rem var(--font-display);
}

.type-scale__meta span {
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}

.type-scale__sample {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The heading classes set size and weight; the font comes with h1 to h3 (3. Base). */
.type-scale__heading {
  font-family: var(--font-display);
  text-wrap: balance;
}

@media (min-width: 768px) {
  .type-scale li {
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: var(--space-l);
  }
}

/* ----------------------------------------------------------------
	Text Colours and Inline Text
---------------------------------------------------------------- */

.type-tones {
  display: grid;
  gap: 0.75rem;
  max-width: 44rem;
}

.type-tones li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--c-line);
}

.type-tones__sample {
  font: 700 1.125rem var(--font-display);
}

/* Each element beside a sample of it; two columns from 768px. */
.type-inline {
  display: grid;
  column-gap: var(--space-xl);
}

.type-inline div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--space-s);
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--c-line);
}

@media (min-width: 768px) {
  .type-inline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ----------------------------------------------------------------
	Tables
---------------------------------------------------------------- */

/* Bootstrap's .table through its own properties: theme text and lines on the
   section's background, the head row in small capitals and the caption on top
   (.caption-top). In .table-responsive it scrolls sideways on phones. */
.table {
  --bs-table-color: var(--c-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--c-line);
  margin-bottom: 0;
}

.table > :not(caption) > * > * {
  padding: 0.875rem 1rem;
  white-space: nowrap;
}

.table th {
  color: var(--c-navy);
  font-family: var(--font-display);
  font-weight: 750;
}

.table thead th {
  border-bottom: 2px solid var(--c-primary);
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.table caption {
  padding-top: 0;
  color: var(--c-navy);
  font: 800 1.125rem var(--font-display);
}

/* ================================================================
	38. Overlays and Feedback
================================================================ */

/* ----------------------------------------------------------------
	Modals
---------------------------------------------------------------- */

/* Bootstrap's modal through its own properties. The theme leaves out .fade, so
   a modal and its backdrop appear at once, as nothing else in the theme moves in. */
.modal {
  --bs-modal-width: 34rem;
  --bs-modal-padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  --bs-modal-color: var(--c-text);
  --bs-modal-bg: var(--c-white);
  --bs-modal-border-width: 0;
  --bs-modal-border-radius: var(--radius-xl);
  --bs-modal-box-shadow: var(--shadow-float);
  --bs-modal-header-padding: var(--bs-modal-padding) var(--bs-modal-padding) 0;
  --bs-modal-header-border-width: 0;
}

.modal-backdrop {
  --bs-backdrop-bg: #0c1838;
  --bs-backdrop-opacity: 0.6;
}

.modal-title {
  color: var(--c-navy);
  font: 800 1.5rem / 1.2 var(--font-display);
  letter-spacing: -0.02em;
}

/* The close button: a Font Awesome cross, as Bootstrap's .btn-close is an SVG image. */
.modal-close {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-inline-start: auto;
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-navy);
  cursor: pointer;
}

.modal-close:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.modal-lead {
  margin-bottom: var(--space-m);
  color: var(--c-text-2);
}

.modal-lead strong {
  color: var(--c-navy);
}

/* The CV upload in the quick apply modal: less padding, so the form fits a laptop screen. */
.file-drop--compact {
  padding: var(--space-m);
}

/* ----------------------------------------------------------------
	Video Lightbox
---------------------------------------------------------------- */

/* The thumbnail: the photo with a play button and a label. */
.video-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-xl);
  color: var(--c-on-color);
  text-decoration: none;
}

.video-thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-xl);
}

.video-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(12 24 56 / 0.7), rgb(12 24 56 / 0) 55%);
}

.video-thumb__play {
  position: absolute;
  z-index: 1;
  inset: 50% auto auto 50%;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--c-on-color);
  color: var(--c-primary-fill);
  box-shadow: 0 0 0 0.625rem rgb(255 255 255 / 0.25);
  translate: -50% -50%;
  transition: box-shadow var(--dur-base) var(--ease-out);
}

.video-thumb__play .icon {
  --icon: 1.75rem;
  margin-inline-start: 0.25rem;
}

.video-thumb:hover .video-thumb__play {
  box-shadow: 0 0 0 0.875rem rgb(255 255 255 / 0.35);
}

.video-thumb__label {
  position: absolute;
  z-index: 1;
  inset: auto 1.25rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font: 700 1rem var(--font-display);
}

.video-thumb__label span {
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.2);
  font-size: var(--fs-xs);
}

/* The modal: the video alone on a dark frame, with the close button above it. */
.modal--video {
  --bs-modal-padding: 0;
  --bs-modal-bg: transparent;
  --bs-modal-box-shadow: none;
}

.modal--video .modal-header {
  justify-content: flex-end;
  padding: 0 0 0.75rem;
}

.modal--video .modal-close {
  border-color: rgb(255 255 255 / 0.3);
  background: transparent;
  color: var(--c-on-color);
}

.modal--video video {
  border-radius: var(--radius-l);
  background: #000;
}

/* ----------------------------------------------------------------
	Toasts
---------------------------------------------------------------- */

/* One toast, centred at the foot of the screen, clear of the header at any
   scroll position; functions.js sets its text. */
.pf-toasts {
  position: fixed;
  inset-inline: 0;
  bottom: 1.5rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

.toast {
  --bs-toast-max-width: 22rem;
  --bs-toast-padding-x: 1rem;
  --bs-toast-padding-y: 0.875rem;
  --bs-toast-color: var(--c-on-color);
  --bs-toast-bg: var(--c-deep);
  --bs-toast-border-width: 0;
  --bs-toast-border-radius: var(--radius-l);
  --bs-toast-box-shadow: var(--shadow-float);
}

.toast-body {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.toast__icon {
  color: var(--c-mint-ink);
}

.toast__text {
  flex: 1;
  font: 700 var(--fs-sm) var(--font-display);
}

.toast__close {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.1);
  color: var(--c-on-color);
  cursor: pointer;
}

/* ----------------------------------------------------------------
	Tooltips
---------------------------------------------------------------- */

/* Bootstrap's tooltip in the heading colour, so it inverts with the theme:
   navy with white text in the light theme, pale with navy text in the dark one. */
.tooltip {
  --bs-tooltip-bg: var(--c-navy);
  --bs-tooltip-color: var(--c-white);
  --bs-tooltip-font-size: var(--fs-xs);
  --bs-tooltip-border-radius: var(--radius-s);
  --bs-tooltip-padding-x: 0.625rem;
  --bs-tooltip-padding-y: 0.375rem;
  --bs-tooltip-opacity: 1;
  font-family: var(--font-display);
  font-weight: 700;
}

/* ----------------------------------------------------------------
	Alerts
---------------------------------------------------------------- */

/* Bootstrap's .alert with an icon, in four tints. The text stays the heading
   colour for contrast; the icon carries the tint. */
.alert {
  --bs-alert-padding-x: 1.25rem;
  --bs-alert-padding-y: 1rem;
  --bs-alert-margin-bottom: 0;
  --bs-alert-border-color: transparent;
  --bs-alert-border-radius: var(--radius-l);
  --bs-alert-color: var(--c-navy);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--fs-sm);
}

.alert + .alert {
  margin-top: 0.75rem;
}

.alert strong {
  font-family: var(--font-display);
}

.alert__icon {
  flex: none;
  margin-top: 0.125rem;
}

.alert-info {
  --bs-alert-bg: var(--c-tint);
}

.alert-info .alert__icon {
  color: var(--c-primary);
}

.alert-success {
  --bs-alert-bg: var(--c-mint-soft);
}

.alert-success .alert__icon {
  color: var(--c-mint-ink);
}

.alert-warning {
  --bs-alert-bg: var(--c-sun-soft);
}

.alert-warning .alert__icon {
  color: var(--c-sun-ink);
}

.alert-danger {
  --bs-alert-bg: var(--c-accent-soft);
}

.alert-danger .alert__icon {
  color: var(--c-accent-ink);
}

/* Room for the close button, which takes Bootstrap's place for .btn-close. */
.alert-dismissible {
  padding-inline-end: 3.5rem;
}

.alert__close {
  position: absolute;
  top: 0.625rem;
  inset-inline-end: 0.625rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--c-navy);
  cursor: pointer;
}

.alert__close:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
}

/* ----------------------------------------------------------------
	Progress Bars
---------------------------------------------------------------- */

/* Bootstrap's .progress with its label and value above it. Tones swap the bar colour. */
.progress {
  --bs-progress-height: 0.625rem;
  --bs-progress-bg: var(--c-tint);
  --bs-progress-border-radius: 999px;
  --bs-progress-bar-bg: var(--c-primary-fill);
}

.progress--accent {
  --bs-progress-bar-bg: var(--c-accent);
}

.progress--mint {
  --bs-progress-bar-bg: var(--c-mint-ink);
}

.progress--sun {
  --bs-progress-bar-bg: var(--c-sun-ink);
}

.progress-item__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.progress-item__head strong {
  color: var(--c-navy);
  font-family: var(--font-display);
}

.score-list {
  display: grid;
  gap: var(--space-m);
}

/* ----------------------------------------------------------------
	Cookie Banner
---------------------------------------------------------------- */

/* Bottom left on wide screens, along the bottom on phones; above the demo
   buttons and below the modals. functions.js shows it until a choice is made.
   On phones the text takes the icon's room, so the banner covers less. */
.cookie-banner {
  position: fixed;
  z-index: 70;
  inset: auto 0.75rem 0.75rem;
  display: grid;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  background: var(--c-white);
  box-shadow: var(--shadow-float);
  font-size: var(--fs-sm);
}

.cookie-banner__icon {
  display: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--c-sun-soft);
  color: var(--c-sun-ink);
}

.cookie-banner__title {
  margin-bottom: 0.25rem;
  color: var(--c-navy);
  font: 800 1.0625rem var(--font-display);
}

.cookie-banner p {
  color: var(--c-text-2);
}

.cookie-banner p a {
  color: var(--c-navy);
  font-weight: 600;
}

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: var(--space-s);
}

/* "Choose cookies" reads as a link but opens the settings modal. */
.cookie-banner__more {
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-navy);
  font: 700 var(--fs-sm) var(--font-display);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

@media (min-width: 576px) {
  .cookie-banner {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 1.25rem;
  }

  .cookie-banner__icon {
    display: grid;
  }
}

@media (min-width: 768px) {
  .cookie-banner {
    inset: auto auto 1rem 1rem;
    width: 30rem;
  }
}

/* While the banner shows, a focused link or field scrolls clear of it. Once the
   visitor uses Tab (functions.js marks <html> with .is-tabbing), the footer also
   grows by the banner's height, so the last links on the page can scroll clear
   too; for the mouse and touch the banner floats over the footer and leaves no
   empty strip under it. No transition (Reduced Motion would give it one): the
   room must be there before the first Tab moves the focus. */
html:has(.cookie-banner:not([hidden])) {
  --cookie-room: 23rem;
  scroll-padding-bottom: var(--cookie-room);
}

html.is-tabbing:has(.cookie-banner:not([hidden])) :is(.site-footer, .launch) {
  padding-bottom: var(--cookie-room);
  transition: none;
}

@media (min-width: 576px) {
  html:has(.cookie-banner:not([hidden])) {
    --cookie-room: 15rem;
  }
}

@media (min-width: 768px) {
  html:has(.cookie-banner:not([hidden])) {
    --cookie-room: 18rem;
  }
}

/* The choices in the settings modal: a checkbox per kind of cookie, with what it does. */
.cookie-option {
  padding-block: var(--space-s);
  border-top: 1px solid var(--c-line);
}

.cookie-option .form-check-label {
  color: var(--c-navy);
  font: 700 1rem var(--font-display);
}

.cookie-option p {
  margin-top: 0.25rem;
  padding-inline-start: 1.5em;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.cookie-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: var(--space-m);
  border-top: 1px solid var(--c-line);
}

/* ----------------------------------------------------------------
	Back to Top
---------------------------------------------------------------- */

/* Bottom right. While the demo menus are on the page it sits above their buttons. */
.back-to-top {
  position: fixed;
  z-index: 55;
  bottom: 1rem;
  inset-inline-end: 1rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1.5px solid var(--c-line-strong);
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-navy);
  box-shadow: var(--shadow-float);
  cursor: pointer;
}

.back-to-top:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.demo-switch ~ .back-to-top {
  bottom: 7.5rem;
}

/* ================================================================
	39. Header, Footer and Title Variants
================================================================ */

/* ----------------------------------------------------------------
	Transparent Header
---------------------------------------------------------------- */

/* Home 4: the header lies over the photo hero until the page scrolls, then
   turns solid (.is-scrolled, from functions.js). It needs script, so the page
   stays as before without it: theme.js marks <html> with .js before the first
   paint. The photo hero (.hero-photo, see Photo Hero) moves up under the header
   and grows by the header's height (with its border), so its photo and text
   show below the header exactly as they would below a solid one. */
.js .site-header--transparent:not(.is-scrolled) {
  border-bottom-color: transparent;
  background: transparent;
}

.js .site-header--transparent ~ main > .hero-photo:first-child {
  --under-header: calc(var(--header-h) + 1px);
  min-height: calc(clamp(34rem, 26rem + 22vw, 46rem) + var(--under-header));
  margin-top: calc(-1 * var(--under-header));
  padding-top: calc(clamp(3rem, 2rem + 4vw, 6rem) + var(--under-header));
}

.js .site-header--transparent:not(.is-scrolled) :is(.brand, .site-nav .nav-link, .nav-toggle, .header-actions__link) {
  color: var(--c-on-color);
}

.js .site-header--transparent:not(.is-scrolled) .brand__name span {
  color: var(--c-accent-light);
}

.js .site-header--transparent:not(.is-scrolled) .brand__mark::after {
  border-color: transparent;
}

.js .site-header--transparent:not(.is-scrolled) :is(.theme-switch, .header-actions__icon, .menu-toggle) {
  border-color: rgb(255 255 255 / 0.4);
  background: transparent;
  color: var(--c-on-color);
}

.js .site-header--transparent:not(.is-scrolled) :is(.site-nav .nav-link:hover, .site-nav .dropdown:focus-within > .nav-link, .site-nav .dropdown:focus-within > .nav-toggle, .header-actions__link:hover, .header-actions__icon:hover) {
  color: var(--c-accent-light);
}

.js .site-header--transparent:not(.is-scrolled) :focus-visible {
  outline-color: var(--c-on-color);
}

/* ----------------------------------------------------------------
	Mega Menu
---------------------------------------------------------------- */

/* Full-width panels: Pages and Blog on every page, and Find a job on Home 2.
   Link columns (one or more groups each) sit beside a promo card across the
   header's width. The panel hangs from the header's container instead of the
   menu item; its top padding still bridges the gap under the link. */
.site-header__inner {
  position: relative;
}

.site-nav .nav-item--mega {
  position: static;
}

/* The panel's see-through top edge starts just under the link text, across the
   whole width, so the pointer can head straight for a far column without
   leaving the menu; the panel itself still begins at the same height. It
   doesn't slide, so that edge stays put while a panel waits to close. */
.site-nav .nav__menu--mega {
  inset-inline: 0;
  top: calc(var(--header-h) / 2 + 0.25rem);
  padding-top: 2.875rem;
  translate: none;
}

.mega {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr);
  gap: var(--space-l);
  padding: var(--space-l);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  background: var(--c-white);
  box-shadow: var(--shadow-float);
}

.mega__title {
  margin-bottom: 0.5rem;
  color: var(--c-text-3);
  font: 700 var(--fs-xs) var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mega ul {
  display: grid;
  gap: 0.125rem;
}

.mega .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-s);
  color: var(--c-navy);
  font: 650 var(--fs-sm) / 1.3 var(--font-display);
  white-space: normal;
}

.mega .dropdown-item .icon {
  color: var(--c-primary);
}

.mega .dropdown-item span {
  margin-inline-start: auto;
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

.mega__promo {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.75rem;
  padding: var(--space-m);
  border-radius: var(--radius-l);
  background: var(--c-tint);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.mega__count {
  color: var(--c-navy);
  font: 800 2.25rem / 1 var(--font-display);
  letter-spacing: -0.03em;
}

.mega__count span {
  display: block;
  margin-top: 0.25rem;
  color: var(--c-primary);
  font-size: var(--fs-sm);
  letter-spacing: 0;
}

/* Four link columns (Pages), and a second group under the first in a column. */
.mega--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.1fr);
}

.mega ul + .mega__title {
  margin-top: var(--space-m);
}

.mega__promo-title {
  color: var(--c-navy);
  font: 800 1.25rem / 1.2 var(--font-display);
}

/* The Blog card leads with the featured post's photo. */
.mega__promo--post img {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-m);
  object-fit: cover;
}

/* 992px to 1199px: the promo card gives its room to the link columns. */
@media (max-width: 1199.98px) {
  .mega {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mega--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .mega__promo {
    display: none;
  }
}

/* ----------------------------------------------------------------
	Light Footer
---------------------------------------------------------------- */

/* Home 5: the same footer on the page's grey, with the colours turned round. */
.site-footer--light {
  border-top: 1px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-text-2);
}

.site-footer--light :is(.site-footer__heading, .site-footer__contact a) {
  color: var(--c-navy);
}

.site-footer--light :is(.site-footer__contact .icon, .site-footer__legal a:hover, nav a:hover) {
  color: var(--c-primary);
}

.site-footer--light .site-footer__bottom {
  border-top-color: var(--c-line);
}

.site-footer--light .site-footer__social a {
  border: 1px solid var(--c-line);
  background: var(--c-white);
  color: var(--c-navy);
}

.site-footer--light .site-footer__social a:hover {
  border-color: transparent;
  background: var(--c-primary-fill);
  color: var(--c-on-color);
}

.site-footer--light .alerts input {
  border-color: var(--c-line-strong);
}

.site-footer--light :focus-visible {
  outline-color: var(--c-primary);
}

/* ----------------------------------------------------------------
	Minimal Footer
---------------------------------------------------------------- */

/* The account pages: logo, copyright, a few links and social, on one row. */
.site-footer--minimal {
  padding-top: 0;
}

.site-footer__minimal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-l);
  padding-block: var(--space-l);
  font-size: var(--fs-xs);
}

/* ----------------------------------------------------------------
	Footer Link Row
---------------------------------------------------------------- */

/* One row of main links, on the centred, branches and photo strip footers. */
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  font: 700 var(--fs-sm) var(--font-display);
}

.site-footer .site-footer__links li + li {
  margin-top: 0;
}

.site-footer__links a {
  color: var(--c-on-color);
}

.site-footer .site-footer__links a:hover {
  color: var(--c-accent-light);
}

.site-footer--light .site-footer__links a {
  color: var(--c-navy);
}

.site-footer--light .site-footer__links a:hover {
  color: var(--c-primary);
}

/* ----------------------------------------------------------------
	Centred Footer
---------------------------------------------------------------- */

/* 404 and the confirmation page: logo, a line, the links and the social icons
   on one centred axis, under a soft glow of the primary colour. */
.site-footer--centred {
  background:
    radial-gradient(42rem 16rem at 50% 0, color-mix(in srgb, var(--c-primary-fill) 34%, transparent), transparent),
    var(--c-deep);
  text-align: center;
}

.site-footer__centred {
  display: grid;
  justify-items: center;
  gap: var(--space-m);
}

.site-footer__centred > p {
  max-width: 34rem;
}

.site-footer--centred .site-footer__links {
  justify-content: center;
  margin-top: var(--space-xs);
}

.site-footer--centred .site-footer__social {
  margin-inline-start: 0;
}

.site-footer--centred .site-footer__bottom {
  justify-content: center;
  justify-self: stretch;
  margin-top: var(--space-s);
}

.site-footer--centred .site-footer__legal {
  justify-content: center;
}

/* ----------------------------------------------------------------
	Job Alerts Footer
---------------------------------------------------------------- */

/* The salary guide: a job alerts panel in the accent colour beside the links.
   Its colour is drawn by ::before, which runs on to the window's edges (both of
   them on phones, the left one from 992px); the footer clips the rest. The
   panel keeps the light theme's colours, so its fields stay white. */
.site-footer--split {
  padding-top: 0;
  overflow: hidden;
}

.site-footer__split {
  --bs-gutter-x: 0;
}

.split-alerts {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-s);
  padding-block: var(--space-2xl);
  color: var(--c-deep);
  color-scheme: light;
}

.split-alerts::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0;
  inset-inline: -100vw;
  background: var(--c-accent);
}

.split-alerts__title {
  max-width: 13ch;
  font: 800 clamp(1.875rem, 1.4rem + 2vw, 2.75rem) / 1.08 var(--font-display);
  letter-spacing: -0.03em;
}

.split-alerts > p:not(.split-alerts__note) {
  max-width: 28rem;
  font-size: var(--fs-lead);
}

/* Email and sector side by side where both get 13rem, the button under them. */
.split-alerts__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.75rem;
  width: min(100%, 32rem);
  margin-top: var(--space-xs);
}

.split-alerts__fields .btn {
  grid-column: 1 / -1;
}

.split-alerts__fields .form-control,
.split-alerts__fields .form-select {
  border-color: transparent;
}

.split-alerts__note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* The navy ring of the base focus style; the footer's white one fades on the accent. */
.split-alerts :focus-visible {
  outline-color: var(--c-deep);
}

.split-links {
  display: grid;
  align-content: start;
  gap: var(--space-xl);
  padding-block: var(--space-2xl);
}

.split-links__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
}

.split-links__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-on-color);
  font: 800 1.125rem var(--font-display);
  text-decoration: none;
}

.split-links__phone .icon {
  color: var(--c-accent-light);
}

.split-links__phone:hover {
  text-decoration: underline;
}

.split-links .site-footer__grid {
  padding-bottom: 0;
}

/* From 992px the panel's colour stops at its own edge, beside the links. */
@media (min-width: 992px) {
  .split-alerts {
    padding-inline-end: var(--space-xl);
  }

  .split-alerts::before {
    inset-inline-end: 0;
  }

  .split-links {
    padding-inline-start: var(--space-xl);
  }
}

/* ----------------------------------------------------------------
	Job Directory Footer
---------------------------------------------------------------- */

/* Home 2: popular searches on a lighter navy band, then about and the app
   beside jobs by sector and by city and the seeker and employer links. */
.site-footer--directory {
  padding-top: 0;
}

.directory-searches {
  margin-bottom: var(--space-2xl);
  padding-block: var(--space-l);
  background: var(--c-navy-2);
}

.directory-searches__inner {
  display: grid;
  gap: var(--space-s);
}

.directory-searches .site-footer__heading {
  margin-bottom: 0;
}

/* Chips drawn for a navy ground. */
.site-footer .chip-list li + li {
  margin-top: 0;
}

.site-footer .chip-list a {
  border-color: rgb(255 255 255 / 0.2);
  background: transparent;
  color: var(--c-on-color);
}

.site-footer .chip-list a:hover {
  border-color: var(--c-on-color);
  background: rgb(255 255 255 / 0.08);
  color: var(--c-on-color);
}

/* The job count after each sector. */
.site-footer--directory nav a span {
  margin-inline-start: 0.5rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.1);
  color: var(--c-on-color);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.directory-about {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-s);
}

.directory-about > p {
  max-width: 24rem;
}

.directory-about .site-footer__heading {
  margin-top: var(--space-s);
  margin-bottom: 0;
}

/* App store links: the store's mark beside two lines of text. */
.store-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.store-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 3.25rem;
  padding: 0.5rem 1.125rem 0.5rem 0.875rem;
  border: 1.5px solid rgb(255 255 255 / 0.25);
  border-radius: var(--radius-m);
  color: var(--c-on-color);
  font: 700 1rem / 1.15 var(--font-display);
  text-decoration: none;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.store-link .icon {
  --icon: 1.75rem;
}

.store-link small {
  display: block;
  color: var(--c-on-dark-2);
  font-size: 0.6875rem;
  font-weight: 600;
}

.store-link:hover {
  border-color: var(--c-on-color);
  background: rgb(255 255 255 / 0.08);
}

/* From 992px the heading sits beside the chips, in line with their first row. */
@media (min-width: 992px) {
  .directory-searches__inner {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-l);
  }
}

/* ----------------------------------------------------------------
	Branches Footer
---------------------------------------------------------------- */

/* Contact 2: the head office and three branches as cards on the primary colour,
   behind them the logo's chevrons as a large watermark (.closing__chevrons).
   The logo turns white, as its usual primary square would vanish here. */
.site-footer--branches {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--c-primary-fill);
  color: rgb(255 255 255 / 0.85);
}

.site-footer--branches .closing__chevrons {
  top: -2rem;
  bottom: auto;
  inset-inline-end: -1.5rem;
  color: var(--c-on-color);
  font-size: clamp(8rem, 5rem + 10vw, 16rem);
  opacity: 0.08;
}

.branch-foot__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-m);
  margin-bottom: var(--space-l);
}

.branch-foot__title {
  max-width: 16ch;
  color: var(--c-on-color);
  font: 800 clamp(1.875rem, 1.4rem + 2vw, 2.75rem) / 1.08 var(--font-display);
  letter-spacing: -0.03em;
}

.branch-foot__head p {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-xs);
}

.branch-foot__head .icon,
.branch-foot .icon {
  color: var(--c-accent-light);
}

.branch-foot__list {
  --bs-gutter-x: var(--grid-gap);
  --bs-gutter-y: var(--grid-gap);
}

.branch-foot {
  height: 100%;
  padding: var(--space-m);
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: var(--radius-l);
  background: color-mix(in srgb, var(--c-deep) 22%, transparent);
}

.branch-foot__city {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-xs);
  color: var(--c-on-color);
  font: 800 1.25rem / 1.2 var(--font-display);
}

.branch-foot__city a {
  color: inherit;
  text-decoration: none;
}

.branch-foot__city a:hover {
  text-decoration: underline;
}

.branch-foot__badge {
  padding: 0.3125rem 0.625rem;
  border-radius: 999px;
  background: var(--c-accent);
  color: var(--c-deep);
  font: 700 var(--fs-xs) / 1 var(--font-display);
}

.branch-foot__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-s);
  color: var(--c-on-color);
  font: 700 1rem var(--font-display);
  text-decoration: none;
}

.branch-foot__phone:hover {
  text-decoration: underline;
}

.branch-foot__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m) var(--space-l);
  margin-top: var(--space-2xl);
  padding-block: var(--space-l);
  border-top: 1px solid rgb(255 255 255 / 0.18);
}

.site-footer--branches .brand__mark {
  background: var(--c-on-color);
  color: var(--c-primary-fill);
}

.site-footer--branches .brand__mark::after {
  border-color: var(--c-primary-fill);
}

.site-footer--branches .site-footer__bottom {
  border-top-color: rgb(255 255 255 / 0.18);
}

.site-footer--branches .site-footer__social a:hover {
  background: var(--c-on-color);
  color: var(--c-primary-fill);
}

/* ----------------------------------------------------------------
	Photo Strip Footer
---------------------------------------------------------------- */

/* About 2: six photos with a follow button, above a compact footer on the
   tint. It takes the light footer's colours (.site-footer--light); on wider
   screens every second photo sits lower, as in the page's collage. */
.site-footer--photos {
  border-top: 0;
  background: var(--c-tint);
}

.photo-foot__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-m);
  margin-bottom: var(--space-l);
}

.photo-foot__title {
  max-width: 18ch;
  margin-top: var(--space-xs);
  color: var(--c-navy);
  font: 800 clamp(1.875rem, 1.4rem + 2vw, 2.75rem) / 1.08 var(--font-display);
  letter-spacing: -0.03em;
}

.photo-foot__strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.photo-foot__strip img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--radius-l);
  object-fit: cover;
}

.photo-foot__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m) var(--space-l);
  margin-top: var(--space-2xl);
  padding-block: var(--space-l);
}

.site-footer--photos .brand__mark::after {
  border-color: var(--c-tint);
}

.site-footer--photos .site-footer__bottom {
  border-top-color: var(--c-line-strong);
}

@media (min-width: 768px) {
  .photo-foot__strip {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding-bottom: 1.5rem;
  }

  .photo-foot__strip img:nth-child(even) {
    translate: 0 1.5rem;
  }
}

/* ----------------------------------------------------------------
	Big Logo Footer
---------------------------------------------------------------- */

/* About 3: the light footer's colours on the page colour, an intro line beside
   the link columns, and the logo standing on the foot of the page. Its font
   size is 0.135 of the container's width, which the logo then fills (it is
   7.3em wide; the container's width is repeated from 4. Layout, with 100vw for
   100%, so a classic scrollbar can push it a few pixels into the gutter, which
   the footer clips). Red Hat Display's baseline sits 0.856em down a
   line-height: 1 box, so a -0.13em margin lets the footer's edge cut just under
   it: only the tail of the p goes. The mark is cap height (0.7em). */
.site-footer--wordmark {
  overflow: hidden;
  background: var(--c-white);
}

.wordmark-intro {
  display: grid;
  align-content: start;
  gap: var(--space-m);
}

.wordmark-intro__title {
  max-width: 14ch;
  color: var(--c-navy);
  font: 800 clamp(1.875rem, 1.4rem + 2vw, 2.75rem) / 1.08 var(--font-display);
  letter-spacing: -0.03em;
}

.wordmark-intro .site-footer__contact {
  margin-top: 0;
}

.wordmark {
  display: flex;
  align-items: center;
  margin-top: var(--space-l);
  margin-bottom: -0.13em;
  color: var(--c-navy);
  font: 800 calc(min(100vw - 2 * var(--gutter), var(--container)) * 0.135) / 1 var(--font-display);
  letter-spacing: -0.055em;
  white-space: nowrap;
  user-select: none;
}

.wordmark > span:last-child {
  color: var(--c-primary);
}

.wordmark .brand__mark {
  flex: none;
  width: 0.7em;
  height: 0.7em;
  margin-inline-end: 0.1em;
  border-radius: 0.18em;
  font-size: 1em;
}

.wordmark .brand__mark i {
  font-size: 0.4em;
}

.wordmark .brand__mark::after {
  top: -0.05em;
  inset-inline-end: -0.05em;
  width: 0.2em;
  height: 0.2em;
  border-width: 0.04em;
}

/* ----------------------------------------------------------------
	Page Title Variants
---------------------------------------------------------------- */

/* A photo behind the title, under a navy wash that stays navy in both themes. */
.page-hero--image {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
  border-bottom: 0;
  background: var(--c-deep);
  color: var(--c-on-color);
}

.page-hero__bg {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero--image::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(100deg, rgb(12 24 56 / 0.94) 30%, rgb(12 24 56 / 0.55));
}

.page-hero--image .t-h1 {
  color: var(--c-on-color);
}

.page-hero--image .page-hero__lead {
  color: var(--c-on-dark-2);
}

.page-hero--image .breadcrumb {
  --bs-breadcrumb-divider-color: rgb(255 255 255 / 0.4);
  --bs-breadcrumb-item-active-color: var(--c-on-color);
  color: var(--c-on-dark-2);
}

.page-hero--image .breadcrumb a {
  color: var(--c-on-dark-2);
}

.page-hero--image .breadcrumb a:hover {
  color: var(--c-on-color);
}

.page-hero--image :focus-visible {
  outline-color: var(--c-on-color);
}

/* Facts under a title, such as a case study's service, sector and place. */
.page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: var(--space-xs);
  color: var(--c-on-dark-2);
  font: 600 var(--fs-sm) var(--font-display);
}

.page-hero__meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.page-hero__meta .icon {
  color: var(--c-accent-light);
}

/* A centred title for pages without a photo. */
.page-hero--center .page-hero__content {
  justify-items: center;
  text-align: center;
}

.page-hero--center .page-hero__lead {
  margin-inline: auto;
}

.page-hero--center :is(.breadcrumb, .page-hero__actions) {
  justify-content: center;
}

/* ================================================================
	40. Account, Profile and Content Pages
================================================================ */

/* ----------------------------------------------------------------
	Pricing Cards
---------------------------------------------------------------- */

.price-cards,
.case-studies,
.pay-tables {
  --bs-gutter-x: var(--grid-gap);
  --bs-gutter-y: var(--grid-gap);
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  background: var(--c-white);
}

.price-card--featured {
  border: 2px solid var(--c-primary);
  box-shadow: var(--shadow-card);
}

.price-card__badge {
  position: absolute;
  top: 1.25rem;
  inset-inline-end: 1.25rem;
}

.price-card__name {
  color: var(--c-navy);
  font: 750 1.25rem / 1.25 var(--font-display);
}

.price-card__price {
  color: var(--c-navy);
  font: 800 clamp(2.25rem, 2rem + 1vw, 2.75rem) / 1 var(--font-display);
  letter-spacing: -0.03em;
}

.price-card__price span {
  color: var(--c-text-3);
  font: 600 var(--fs-sm) var(--font-text);
  letter-spacing: 0;
}

.price-card__text {
  color: var(--c-text-2);
}

.price-card .checks {
  padding-block: var(--space-s);
  border-top: 1px solid var(--c-line);
}

.price-card .btn {
  margin-top: auto;
}

/* ----------------------------------------------------------------
	Account Pages
---------------------------------------------------------------- */

.auth {
  background:
    radial-gradient(40% 60% at 0% 0%, var(--c-tint), transparent 70%),
    var(--c-white);
}

.auth__inner {
  align-items: center;
}

.auth__main {
  display: grid;
  align-content: start;
  gap: var(--space-m);
  max-width: 36rem;
}

.auth-form {
  display: grid;
  gap: var(--space-s);
}

.auth-form__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}

.auth-form__row a,
.auth-form__switch a {
  color: var(--c-primary);
  font-weight: 600;
}

.auth-form__switch {
  margin-top: var(--space-s);
  color: var(--c-text-2);
}

/* The notes sent back from the reset and registration forms show only when the
   address names them (login.html#reset-sent). */
.auth-note:not(:target) {
  display: none;
}

.auth-tabs {
  justify-self: start;
}

.form-hint {
  margin-top: 0.375rem;
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

/* The photo beside the form, with a navy card of what an account is for. */
.auth-panel {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 38rem;
  padding: var(--space-m);
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.auth-panel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.auth-panel__card {
  position: relative;
  display: grid;
  gap: var(--space-m);
  padding: var(--space-l);
  border-radius: var(--radius-l);
  background: rgb(12 24 56 / 0.9);
  color: var(--c-on-color);
}

.auth-panel__quote {
  padding-top: var(--space-m);
  border-top: 1px solid rgb(255 255 255 / 0.14);
  font: 700 1.0625rem / 1.45 var(--font-display);
}

.auth-panel__quote figcaption {
  margin-top: 0.5rem;
  color: var(--c-on-dark-2);
  font: 400 var(--fs-sm) var(--font-text);
}

/* ----------------------------------------------------------------
	Employer Profile
---------------------------------------------------------------- */

/* A cover photo with the company card overlapping its foot. */
.profile-hero {
  padding-bottom: var(--space-l);
}

.profile-hero__cover {
  height: clamp(11rem, 6rem + 14vw, 20rem);
  overflow: hidden;
}

.profile-hero__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-hero__card {
  position: relative;
  display: grid;
  justify-items: start;
  gap: var(--space-m);
  margin-top: calc(-1 * clamp(3rem, 2rem + 3vw, 5rem));
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radius-xl);
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

.profile-hero__mark {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius-l);
  font-size: 1.75rem;
}

.profile-hero__body {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.profile-hero__lead {
  max-width: 40rem;
  color: var(--c-text-2);
  font-size: var(--fs-lead);
}

.profile-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  color: var(--c-text-2);
  font: 600 var(--fs-sm) var(--font-display);
}

.profile-hero__meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.profile-hero__meta .icon {
  color: var(--c-primary);
}

.profile-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (min-width: 992px) {
  .profile-hero__card {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
  }

  .profile-hero__actions {
    flex-direction: column;
  }
}

.profile-section + .profile-section {
  margin-top: var(--space-2xl);
}

.profile-section h2 {
  margin-bottom: var(--space-s);
  color: var(--c-navy);
  font: 800 1.5rem / 1.25 var(--font-display);
  letter-spacing: -0.02em;
}

.profile-section > p + p {
  margin-top: 1em;
}

.profile-section__intro {
  margin-bottom: var(--space-m);
  color: var(--c-text-2);
}

.profile-section__more {
  margin-top: var(--space-m);
}

/* The company at a glance, in the sidebar. */
.facts-card {
  padding: var(--space-l);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  background: var(--c-white);
}

.facts-card__title {
  color: var(--c-navy);
  font: 800 1.125rem var(--font-display);
}

/* ----------------------------------------------------------------
	Consultant Profile
---------------------------------------------------------------- */

/* The portrait on its colour block, with the availability badge. */
.person-portrait {
  position: relative;
  width: min(100%, 26rem);
  margin-inline: auto;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.person-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-split {
  margin-top: var(--space-2xl);
}

.profile-split .split__main > p {
  color: var(--c-text);
  font-size: 1.0625rem;
}

/* Names that link to a profile keep their colour until hovered. */
:is(.consultant__name, .person__name, .job-head__org, .summary-card__org, .job-banner__org) a {
  color: inherit;
  text-decoration: none;
}

:is(.consultant__name, .person__name, .job-head__org, .summary-card__org) a:hover {
  color: var(--c-primary);
  text-decoration: underline;
}

.job-banner__org a:hover {
  text-decoration: underline;
}

/* ----------------------------------------------------------------
	Case Studies
---------------------------------------------------------------- */

.case-study {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  background: var(--c-white);
  transition: box-shadow var(--dur-base) var(--ease-out);
}

.case-study:hover {
  box-shadow: var(--shadow-card);
}

.case-study__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.case-study__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  color: var(--c-text-2);
}

.case-study__client {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--c-navy);
  font: 700 var(--fs-sm) var(--font-display);
}

.case-study__client .org-mark {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-s);
  font-size: 0.875rem;
}

.case-study__title {
  color: var(--c-navy);
  font: 800 1.375rem / 1.25 var(--font-display);
  letter-spacing: -0.02em;
}

.case-study__title a {
  color: inherit;
  text-decoration: none;
}

.case-study__title a:hover {
  color: var(--c-primary);
}

.case-study__metric {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: var(--fs-sm);
}

.case-study__metric strong {
  color: var(--c-primary);
  font: 800 1.75rem / 1 var(--font-display);
}

.case-study .ticket__tags {
  margin-top: auto;
}

/* The link under a case on the service pages sits on the navy block. */
.case__link {
  margin-top: var(--space-m);
  color: var(--c-accent-light);
}

.case :focus-visible {
  outline-color: var(--c-on-color);
}

/* ----------------------------------------------------------------
	Salary Guide
---------------------------------------------------------------- */

/* The calculator: the form beside a navy card of results. */
.calc {
  --bs-gutter-x: var(--grid-gap);
  --bs-gutter-y: var(--grid-gap);
}

.calc__form {
  height: 100%;
}

/* .form-card__title floats for the legends it was made for; this one is a
   heading, so the fields go under it, not beside it. */
.calc__form .form-card__title {
  float: none;
}

.calc-result {
  display: grid;
  align-content: start;
  gap: var(--space-m);
  height: 100%;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radius-xl);
  background: var(--c-deep);
  color: var(--c-on-dark-2);
}

.calc-result__title {
  color: var(--c-on-color);
  font: 800 1.25rem var(--font-display);
}

.calc-result dl > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.75rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.14);
}

.calc-result dd {
  color: var(--c-on-color);
  font: 700 1.125rem var(--font-display);
  font-variant-numeric: tabular-nums;
}

.calc-result__total dt {
  color: var(--c-on-color);
  font-weight: 700;
}

.calc-result__total dd {
  color: var(--c-accent-light);
  font-size: 1.75rem;
}

.calc-result__note {
  font-size: var(--fs-xs);
}

/* A sector's guide pay: its title, a table and a link to its jobs. */
.pay-table {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  background: var(--c-white);
}

.pay-table__title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--c-navy);
  font: 800 1.25rem var(--font-display);
}

.pay-table__title .icon {
  color: var(--c-primary);
}

.pay-table .table-responsive {
  align-self: stretch;
}

.pay-table .table > :not(caption) > * > * {
  padding: 0.75rem 0.5rem;
  font-size: var(--fs-sm);
}

.pay-table .table thead th {
  white-space: normal;
}

.pay-table .service__link {
  margin-top: auto;
}

/* The guide note above the tables, one grid gap away from them. */
.alert:has(+ .pay-tables) {
  margin-bottom: var(--grid-gap);
}

/* ----------------------------------------------------------------
	Coming Soon and Maintenance
---------------------------------------------------------------- */

/* One full screen: a photo (or the brand glow) under navy, the logo, the
   message and a footer line. */
.launch {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--c-deep);
  color: var(--c-on-dark-2);
}

.launch__bg {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.launch::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(110deg, rgb(12 24 56 / 0.96) 35%, rgb(12 24 56 / 0.6));
}

.launch--maintenance::before {
  background:
    radial-gradient(55% 60% at 90% 0%, color-mix(in srgb, var(--c-primary-fill) 45%, transparent), transparent 70%),
    radial-gradient(40% 45% at 0% 100%, color-mix(in srgb, var(--c-accent) 18%, transparent), transparent 70%);
}

.launch__inner {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-xl);
  min-height: 100vh;
  min-height: 100dvh;
  padding-block: var(--space-l);
}

.launch__content {
  display: grid;
  align-self: center;
  justify-items: start;
  gap: var(--space-m);
  max-width: 46rem;
}

.launch__title {
  color: var(--c-on-color);
}

.launch__lead {
  max-width: 38rem;
  font-size: var(--fs-lead);
}

.launch__date {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-accent-light);
  font: 700 var(--fs-sm) var(--font-display);
}

.launch__form {
  width: min(100%, 32rem);
}

.launch__help a {
  color: var(--c-on-color);
  font-weight: 600;
}

.launch__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding-top: var(--space-m);
  border-top: 1px solid rgb(255 255 255 / 0.14);
  font-size: var(--fs-xs);
}

.launch__foot .site-footer__social a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.08);
  color: var(--c-on-color);
}

.launch :focus-visible {
  outline-color: var(--c-on-color);
}

/* The countdown: days, hours, minutes and seconds in four tiles, two by two on
   phones, in a row from 576px. */
.countdown {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  width: min(100%, 20rem);
}

@media (min-width: 576px) {
  .countdown {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(100%, 26rem);
  }
}

.countdown > div {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  padding: 0.875rem 0.5rem;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--radius-l);
  background: rgb(255 255 255 / 0.06);
}

.countdown__num {
  color: var(--c-on-color);
  font: 800 clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem) / 1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.countdown__unit {
  font: 700 var(--fs-xs) var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Maintenance: an icon, the progress of the work and what still works. */
.launch__icon {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c-accent) 20%, transparent);
  color: var(--c-accent-light);
}

.launch__progress {
  width: min(100%, 28rem);
}

.launch .progress {
  --bs-progress-bg: rgb(255 255 255 / 0.14);
}

.launch .progress-item__head,
.launch .progress-item__head strong {
  color: var(--c-on-color);
}

.launch__status {
  display: grid;
  gap: 0.625rem;
}

.launch__status li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.launch__state {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font: 700 var(--fs-xs) var(--font-display);
}

.launch__state--ok {
  background: rgb(116 223 177 / 0.16);
  color: #74dfb1;
}

.launch__state--wait {
  background: rgb(244 199 102 / 0.16);
  color: #f4c766;
}

/* ----------------------------------------------------------------
	Style Guide Additions
---------------------------------------------------------------- */

.guide-note {
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}

/* An icon-only link, as on the consultant cards. */
.guide-icon-link {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  color: var(--c-navy);
}

.guide-icon-link:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.guide-narrow--video {
  max-width: 36rem;
}

.guide-frame--line {
  border: 1px solid var(--c-line);
}

/* The links to the header and footer variants, as the index cards. */
.guide-variants {
  margin-top: 0;
}

.guide-variants .service__icon {
  width: 2.75rem;
  height: 2.75rem;
}

.guide-variants a:hover .service__icon {
  background: var(--c-primary-fill);
  color: var(--c-on-color);
}

/* ================================================================
	41. Blog
================================================================ */

/* ----------------------------------------------------------------
	Archive Layout
---------------------------------------------------------------- */

/* The blog's sidebar is taller than the screen, so it scrolls with the page
   instead of sticking below the header. */
@media (min-width: 992px) {
  .layout--blog > .layout__aside {
    position: static;
    width: calc(20rem + var(--bs-gutter-x));
  }
}

.post-grid {
  --bs-gutter-x: var(--grid-gap);
  --bs-gutter-y: var(--grid-gap);
}

.layout--blog .pagination,
.post-grid + .pagination,
.post-list + .pagination,
.masonry + .pagination,
.timeline + .pagination {
  margin-top: var(--space-xl);
}

/* ----------------------------------------------------------------
	Post Meta
---------------------------------------------------------------- */

/* Category, date and reading time; the writer and "Read more" at the foot. */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.875rem;
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

.post-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

.post-author {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-navy);
  font: 650 var(--fs-sm) var(--font-display);
}

.post-author__photo {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 20%;
}

.post-author__photo--initials {
  display: grid;
  place-items: center;
  background: var(--c-tint);
  color: var(--c-primary);
  font: 800 0.75rem var(--font-display);
}

.post-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-primary);
  font: 700 var(--fs-sm) var(--font-display);
}

/* ----------------------------------------------------------------
	Large and Medium Image Posts
---------------------------------------------------------------- */

/* Each post is one link: its title, stretched over the post. */
.post-list {
  display: grid;
  gap: var(--space-xl);
}

.post-large {
  position: relative;
  display: grid;
  gap: var(--space-m);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--c-line);
}

.post-large__media,
.post-medium__media,
.post-card__media,
.timeline__media {
  overflow: hidden;
}

.post-large__media img,
.post-medium__media img,
.post-card__media img,
.timeline__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.post-large__media {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
}

.post-large:hover img,
.post-medium:hover img,
.post-card:hover img,
.timeline__card:hover img {
  transform: scale(1.04);
}

.post-large__body,
.post-medium__body {
  display: grid;
  gap: 0.75rem;
}

.post-large__title {
  color: var(--c-navy);
  font: 800 clamp(1.5rem, 1.2rem + 1vw, 2rem) / 1.2 var(--font-display);
  letter-spacing: -0.02em;
}

.post-medium__title {
  color: var(--c-navy);
  font: 800 1.375rem / 1.25 var(--font-display);
  letter-spacing: -0.015em;
}

:is(.post-large__title, .post-medium__title, .post-card__title, .timeline__title) a {
  text-decoration: none;
}

:is(.post-large, .post-medium, .post-card, .timeline__card):hover :is(.post-large__title, .post-medium__title, .post-card__title, .timeline__title) a {
  color: var(--c-primary);
}

.post-large__excerpt {
  color: var(--c-text-2);
  font-size: 1.0625rem;
}

.post-list--medium {
  gap: var(--grid-gap);
}

.post-medium {
  position: relative;
  display: grid;
  gap: var(--space-m);
  padding: var(--space-m);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  background: var(--c-white);
  transition: box-shadow var(--dur-base) var(--ease-out);
}

.post-medium:hover {
  box-shadow: var(--shadow-card);
}

.post-medium__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-l);
}

.post-medium__excerpt {
  color: var(--c-text-2);
}

@media (min-width: 576px) {
  .post-medium {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: center;
  }
}

/* ----------------------------------------------------------------
	Post Cards
---------------------------------------------------------------- */

/* For the grids, the masonry and related posts. --tall and --square change the
   photo's proportions, so masonry columns vary in height. */
.post-card {
  position: relative;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  background: var(--c-white);
  transition: box-shadow var(--dur-base) var(--ease-out);
}

.post-card:hover {
  box-shadow: var(--shadow-card);
}

.post-card__media {
  aspect-ratio: 3 / 2;
}

.post-card--tall .post-card__media {
  aspect-ratio: 3 / 4;
}

.post-card--square .post-card__media {
  aspect-ratio: 1;
}

.post-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.625rem;
  padding: var(--space-m);
}

.post-card__title {
  color: var(--c-navy);
  font: 750 1.1875rem / 1.3 var(--font-display);
  letter-spacing: -0.01em;
}

.post-card__excerpt {
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.post-card .post-foot {
  margin-top: auto;
  padding-top: 0.5rem;
}

/* ----------------------------------------------------------------
	Masonry
---------------------------------------------------------------- */

/* CSS columns: each card keeps its own height and the next one fills the gap
   below it, top to bottom, then the next column. */
.masonry {
  column-gap: var(--grid-gap);
}

.masonry > * {
  margin-bottom: var(--grid-gap);
  break-inside: avoid;
}

.masonry .post-card {
  height: auto;
}

@media (min-width: 768px) {
  .masonry {
    columns: 2;
  }
}

@media (min-width: 992px) {
  .masonry--3,
  .masonry--4 {
    columns: 3;
  }
}

@media (min-width: 1200px) {
  .masonry--4 {
    columns: 4;
  }
}

/* A pull quote standing among the posts; it opens its post. */
.post-quote {
  position: relative;
  display: grid;
  gap: var(--space-s);
  padding: var(--space-l);
  border-radius: var(--radius-xl);
  background: var(--c-deep);
  color: var(--c-on-dark-2);
}

.post-quote__icon {
  color: var(--c-accent-light);
}

.post-quote blockquote p {
  color: var(--c-on-color);
  font: 800 1.375rem / 1.3 var(--font-display);
  letter-spacing: -0.015em;
}

.post-quote__source {
  font-size: var(--fs-sm);
}

.post-quote__source a {
  color: inherit;
  text-decoration: none;
}

.post-quote:hover .post-quote__source a {
  color: var(--c-on-color);
  text-decoration: underline;
}

.post-quote :focus-visible {
  outline-color: var(--c-on-color);
}

/* ----------------------------------------------------------------
	Timeline
---------------------------------------------------------------- */

/* A line down the side with a dot per post and a pill per month. From 992px the
   two-sided version runs the line down the middle and alternates the posts,
   the right-hand ones a little lower. */
.timeline {
  position: relative;
  display: grid;
  gap: var(--space-l);
  padding-inline-start: 2.5rem;
}

.timeline::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0.75rem;
  width: 2px;
  background: var(--c-line);
}

.timeline__month {
  position: relative;
  margin-inline-start: -2.5rem;
}

.timeline__month h2 {
  display: inline-block;
  padding: 0.375rem 1rem;
  border-radius: 999px;
  background: var(--c-primary-fill);
  color: var(--c-on-color);
  font: 700 var(--fs-sm) / 1.2 var(--font-display);
}

.timeline__item {
  position: relative;
}

.timeline__item::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 1.5rem;
  inset-inline-start: -2.25rem;
  width: 1.125rem;
  height: 1.125rem;
  border: 3px solid var(--c-primary-fill);
  border-radius: 50%;
  background: var(--c-white);
}

.timeline__card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  background: var(--c-white);
  transition: box-shadow var(--dur-base) var(--ease-out);
}

.timeline__card:hover {
  box-shadow: var(--shadow-card);
}

.timeline__media {
  aspect-ratio: 16 / 9;
}

.timeline__body {
  display: grid;
  gap: 0.625rem;
  padding: var(--space-m);
  color: var(--c-text-2);
}

.timeline__title {
  color: var(--c-navy);
  font: 800 1.25rem / 1.3 var(--font-display);
  letter-spacing: -0.015em;
}

@media (min-width: 992px) {
  .timeline--two-sided {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 5rem;
    padding-inline-start: 0;
  }

  .timeline--two-sided::before {
    inset-inline-start: calc(50% - 1px);
  }

  .timeline--two-sided .timeline__month {
    grid-column: 1 / -1;
    justify-self: center;
    margin-inline-start: 0;
  }

  .timeline--two-sided .timeline__item--start {
    grid-column: 1;
  }

  .timeline--two-sided .timeline__item--end {
    grid-column: 2;
    margin-top: 4rem;
  }

  .timeline--two-sided .timeline__item--start::before {
    inset-inline-start: auto;
    inset-inline-end: calc(-2.5rem - 0.5625rem);
  }

  .timeline--two-sided .timeline__item--end::before {
    inset-inline-start: calc(-2.5rem - 0.5625rem);
  }
}

/* ----------------------------------------------------------------
	Sidebar Widgets
---------------------------------------------------------------- */

.blog-side {
  display: grid;
  align-content: start;
  gap: var(--space-l);
}

.side-search {
  display: flex;
  gap: 0.5rem;
}

.side-search .form-control {
  flex: 1;
  min-width: 0;
}

.side-search .btn {
  flex: none;
  padding-inline: 1rem;
}

.widget__title {
  margin-bottom: var(--space-s);
  color: var(--c-navy);
  font: 800 1.125rem var(--font-display);
}

.widget-cats li + li {
  border-top: 1px solid var(--c-line);
}

.widget-cats a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.625rem;
  color: var(--c-text);
  text-decoration: none;
}

.widget-cats a:hover {
  color: var(--c-primary);
}

.widget-cats span {
  min-width: 2rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  text-align: center;
}

.mini-posts {
  display: grid;
  gap: var(--space-s);
}

.mini-post {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.875rem;
  color: var(--c-navy);
  text-decoration: none;
}

.mini-post img {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius-m);
  object-fit: cover;
}

.mini-post > span {
  display: grid;
  gap: 0.25rem;
}

.mini-post strong {
  font: 700 var(--fs-sm) / 1.35 var(--font-display);
}

.mini-post time {
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

.mini-post:hover strong {
  color: var(--c-primary);
}

.chip-list--tags a {
  padding: 0.375rem 0.75rem;
  font-size: var(--fs-xs);
}

/* ----------------------------------------------------------------
	Single Post
---------------------------------------------------------------- */

/* The photo full width behind the title, under a navy wash. */
.article-header--image {
  position: relative;
  isolation: isolate;
  padding-block: clamp(4rem, 3rem + 6vw, 8rem) clamp(2.5rem, 2rem + 3vw, 4.5rem);
  background: var(--c-deep);
  color: var(--c-on-dark-2);
}

.article-header__bg {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-header--image::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(to top, rgb(12 24 56 / 0.95) 25%, rgb(12 24 56 / 0.6));
}

.article-header--image :is(.t-h1, .article-meta strong) {
  color: var(--c-on-color);
}

.article-header--image :is(.page-hero__lead, .article-meta) {
  color: var(--c-on-dark-2);
}

.article-header--image .breadcrumb {
  --bs-breadcrumb-divider-color: rgb(255 255 255 / 0.4);
  --bs-breadcrumb-item-active-color: var(--c-on-color);
}

.article-header--image .breadcrumb a {
  color: var(--c-on-dark-2);
}

.article-header--image .breadcrumb a:hover {
  color: var(--c-on-color);
}

.article-header--image :focus-visible {
  outline-color: var(--c-on-color);
}

/* Tags and sharing, then the previous and next posts. */
.post-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  margin-top: var(--space-xl);
  padding-block: var(--space-m);
  border-block: 1px solid var(--c-line);
}

.post-nav {
  display: grid;
  gap: var(--grid-gap);
  margin-top: var(--space-xl);
}

.post-nav__link {
  display: grid;
  align-content: start;
  gap: 0.375rem;
  padding: var(--space-m);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  color: var(--c-navy);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.post-nav__link:hover {
  border-color: var(--c-primary);
}

.post-nav__link span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-text-3);
  font: 700 var(--fs-xs) var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.post-nav__link strong {
  font: 700 1rem / 1.35 var(--font-display);
}

@media (min-width: 576px) {
  .post-nav {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .post-nav__link--next {
    text-align: end;
  }

  .post-nav__link--next span {
    justify-content: flex-end;
  }
}

/* ----------------------------------------------------------------
	Comments
---------------------------------------------------------------- */

/* Threaded: replies sit under their comment behind a line; the author's own
   replies are tinted. */
.comments {
  margin-top: var(--space-2xl);
}

.comments__title {
  margin-bottom: var(--space-m);
  color: var(--c-navy);
  font: 800 1.5rem / 1.2 var(--font-display);
  letter-spacing: -0.02em;
}

.comment-list {
  display: grid;
  gap: var(--space-m);
}

.comment-list--replies {
  margin-top: var(--space-m);
  padding-inline-start: clamp(1rem, 0.5rem + 3vw, 3.5rem);
  border-inline-start: 2px solid var(--c-line);
}

.comment__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  padding: var(--space-m);
  border-radius: var(--radius-l);
  background: var(--c-surface);
}

.comment--author > .comment__inner {
  background: var(--c-tint);
}

.comment__photo {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 20%;
}

.comment__photo--initials {
  display: grid;
  place-items: center;
  background: var(--c-white);
  color: var(--c-primary);
  font: 800 0.9375rem var(--font-display);
}

.comment__body {
  display: grid;
  justify-items: start;
  gap: 0.5rem;
  color: var(--c-text);
}

.comment__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
}

.comment__head strong {
  color: var(--c-navy);
  font-family: var(--font-display);
}

.comment__head time {
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

.comment__reply {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--c-primary);
  font: 700 var(--fs-sm) var(--font-display);
  text-decoration: none;
}

.comment__reply:hover {
  text-decoration: underline;
}

.comment-form {
  display: grid;
  gap: var(--space-s);
  margin-top: var(--space-xl);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  background: var(--c-white);
}

.comment-form .comments__title {
  margin-bottom: 0;
}

/* ================================================================
	42. About and Contact Variants
================================================================ */

/* ----------------------------------------------------------------
	Audience Cards
---------------------------------------------------------------- */

/* About 3: one card for job seekers and one for employers, with two figures each. */
.audience-cards,
.awards,
.departments {
  --bs-gutter-x: var(--grid-gap);
  --bs-gutter-y: var(--grid-gap);
}

.audience-card {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-s);
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  background: var(--c-white);
}

.audience-card--employer {
  border-color: transparent;
  background: var(--c-tint);
}

.audience-card__title {
  color: var(--c-navy);
  font: 800 1.625rem / 1.2 var(--font-display);
  letter-spacing: -0.02em;
}

.audience-card p {
  color: var(--c-text-2);
}

.audience-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
  margin-block: var(--space-xs);
}

.audience-card__facts div {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.25rem;
}

.audience-card__facts dt {
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}

.audience-card__facts dd {
  color: var(--c-navy);
  font: 800 2rem / 1 var(--font-display);
  letter-spacing: -0.03em;
}

/* ----------------------------------------------------------------
	Impact
---------------------------------------------------------------- */

/* The year in numbers as progress bars on navy, in both themes. */
.impact {
  background: var(--c-deep);
  color: var(--c-on-dark-2);
}

/* Stacked on phones with no side gutter (as .layout and .split), side by side
   with a wide one from 992px. */
.impact__inner,
.letter {
  --bs-gutter-x: 0;
  --bs-gutter-y: var(--space-xl);
  align-items: center;
}

@media (min-width: 992px) {
  .impact__inner,
  .letter {
    --bs-gutter-x: var(--space-2xl);
  }
}

.impact__text {
  display: grid;
  justify-items: start;
  gap: var(--space-s);
}

.impact .t-h2,
.impact .progress-item__head,
.impact .progress-item__head strong {
  color: var(--c-on-color);
}

.impact .progress {
  --bs-progress-bg: rgb(255 255 255 / 0.14);
}

.impact .score-list {
  gap: var(--space-l);
}

.impact :focus-visible {
  outline-color: var(--c-on-color);
}

/* ----------------------------------------------------------------
	Founder Letter
---------------------------------------------------------------- */

.letter__photo {
  width: min(100%, 22rem);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.letter__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.letter__body {
  display: grid;
  justify-items: start;
  gap: var(--space-s);
}

.letter__sign {
  display: grid;
  color: var(--c-text-2);
}

.letter__sign strong {
  color: var(--c-navy);
  font: 800 1.25rem var(--font-display);
}

/* ----------------------------------------------------------------
	Awards
---------------------------------------------------------------- */

.award {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.5rem;
  padding: var(--space-l);
  border-radius: var(--radius-xl);
  background: var(--c-white);
}

.award__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.25rem;
  border-radius: 50%;
  background: var(--c-sun-soft);
  color: var(--c-sun-ink);
}

.award__year {
  color: var(--c-primary);
  font: 800 var(--fs-sm) var(--font-display);
}

.award__title {
  color: var(--c-navy);
  font: 800 1.125rem / 1.3 var(--font-display);
}

.award p:last-child {
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

/* ----------------------------------------------------------------
	Departments
---------------------------------------------------------------- */

/* Contact 2: a card per team with its number, address and hours. */
.department {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: var(--space-l);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  background: var(--c-white);
}

.department__title {
  color: var(--c-navy);
  font: 800 1.25rem var(--font-display);
}

.department p {
  color: var(--c-text-2);
}

.department__links {
  display: grid;
  gap: 0.5rem;
  align-self: stretch;
  margin-top: auto;
  padding-top: var(--space-s);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm);
}

.department__links li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-text-2);
}

.department__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-navy);
  font-weight: 600;
  text-decoration: none;
}

.department__links a:hover {
  color: var(--c-primary);
}

.department__links .icon {
  color: var(--c-primary);
}

.contact-card__note {
  display: flex;
  gap: 0.5rem;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.contact-card__note .icon {
  margin-top: 0.25rem;
  color: var(--c-primary);
}

/* The branches beside the map, two to a row from 576px. */
.branch-links {
  display: grid;
  gap: 0.5rem;
  align-self: stretch;
  margin-block: var(--space-s);
}

.branch-links a {
  display: grid;
  gap: 0.125rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.branch-links a:hover {
  border-color: var(--c-primary);
}

.branch-links strong {
  color: var(--c-navy);
  font: 750 1rem var(--font-display);
}

@media (min-width: 576px) {
  .branch-links {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* ----------------------------------------------------------------
	Contact Split
---------------------------------------------------------------- */

/* Contact 3: the details on navy beside the form, at the top of the page. */
.contact-split {
  padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) var(--space-section);
  background:
    radial-gradient(45% 60% at 100% 0%, var(--c-tint), transparent 70%),
    var(--c-white);
}

.contact-split__inner {
  --bs-gutter-x: var(--grid-gap);
  --bs-gutter-y: var(--grid-gap);
}

.contact-split__panel {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-m);
  height: 100%;
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border-radius: var(--radius-xl);
  background: var(--c-deep);
  color: var(--c-on-dark-2);
}

.contact-split__panel .t-h1 {
  color: var(--c-on-color);
}

.contact-split__panel .breadcrumb {
  --bs-breadcrumb-divider-color: rgb(255 255 255 / 0.4);
  --bs-breadcrumb-item-active-color: var(--c-on-color);
}

.contact-split__panel .breadcrumb a {
  color: var(--c-on-dark-2);
}

.contact-split__panel .breadcrumb a:hover {
  color: var(--c-on-color);
}

.contact-split__lead {
  font-size: var(--fs-lead);
}

.contact-split__list {
  display: grid;
  gap: var(--space-s);
}

.contact-split__list li {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.contact-split__list .icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.08);
  color: var(--c-accent-light);
}

.contact-split__list span {
  display: grid;
  gap: 0.125rem;
}

.contact-split__list strong {
  color: var(--c-on-color);
  font-family: var(--font-display);
}

.contact-split__list a {
  color: var(--c-on-dark-2);
}

.contact-split__list a:hover {
  color: var(--c-on-color);
}

.contact-split__hours {
  display: grid;
  gap: 0.375rem;
  align-self: stretch;
  padding-top: var(--space-m);
  border-top: 1px solid rgb(255 255 255 / 0.14);
  font-size: var(--fs-sm);
}

.contact-split__hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.contact-split__hours strong {
  color: var(--c-on-color);
  text-align: end;
}

.contact-split__panel :focus-visible {
  outline-color: var(--c-on-color);
}

.contact-split__form {
  height: 100%;
}

/* .form-card__title floats for legends; this one is a heading. */
.contact-split__title {
  float: none;
}

/* What the message is about: radios drawn as pills (.btn-choice, 24. Forms). */
.topic-picker {
  margin-bottom: var(--space-m);
}

.topic-picker legend {
  margin-bottom: 0.625rem;
  color: var(--c-navy);
  font: 700 var(--fs-sm) / 1.3 var(--font-display);
}

.topic-picker__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.form-field__optional {
  color: var(--c-text-3);
  font-weight: 400;
}

/* ================================================================
	43. Agency Dashboard
================================================================ */

/* ----------------------------------------------------------------
	Dashboard Layout
---------------------------------------------------------------- */

/* The staff pages in dashboard/: a navy sidebar beside a column with the top bar
   and the content, on the grey page colour so the white cards stand out. Below
   992px the sidebar becomes an offcanvas panel and the column takes the width.
   --dash-gap matches the gutters of the Bootstrap rows inside (g-3, g-xl-4). */
.dash {
  --dash-gap: 1rem;
  --dash-pad: clamp(1rem, 0.5rem + 2vw, 2.25rem);
  min-height: 100vh;
  background: var(--c-surface);
}

@media (min-width: 992px) {
  .dash {
    display: grid;
    grid-template-columns: 16.5rem minmax(0, 1fr);
  }
}

@media (min-width: 1200px) {
  .dash {
    --dash-gap: 1.5rem;
  }
}

/* One column that never grows past the screen: wide tables scroll inside it. */
.dash__body > main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--dash-gap);
  padding: var(--dash-pad) var(--dash-pad) calc(var(--dash-pad) + 4rem);
}

/* Cards side by side in a row share its height; stacked ones keep their own. */
.row > :not(.dash-stack) > .dash-card {
  height: 100%;
}

/* The fallbacks are for these parts outside .dash (the Elements page). */
.dash-stack {
  display: flex;
  flex-direction: column;
  gap: var(--dash-gap, 1rem);
}

/* ----------------------------------------------------------------
	Dashboard Sidebar
---------------------------------------------------------------- */

/* From 992px the column itself is navy and the panel sticks to the top while
   the content scrolls; Bootstrap's .offcanvas-lg is a static block there. Below
   992px the same panel slides in as an offcanvas (at once: no transition). */
.dash__side {
  background: var(--c-deep);
}

.dash-nav {
  --bs-offcanvas-width: min(18rem, 86vw);
  --bs-offcanvas-bg: var(--c-deep);
  --bs-offcanvas-color: var(--c-on-dark-2);
  --bs-offcanvas-transition: none;
  color: var(--c-on-dark-2);
}

@media (min-width: 992px) {
  .dash-nav {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
}

/* Bootstrap hides an .offcanvas-lg header from 992px; this one holds the logo,
   so it stays, and only the close button goes. */
.dash-nav .dash-nav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
  padding: 0 1.25rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
}

.dash-nav .dash-nav__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--space-m);
  padding: 1.25rem 0.875rem;
  overflow-y: auto;
}

.dash-nav :focus-visible {
  outline-color: var(--c-on-color);
}

.dash-nav__close {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1.5px solid rgb(255 255 255 / 0.24);
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--c-on-color);
  cursor: pointer;
}

.dash-nav__group {
  margin-bottom: 0.5rem;
  padding-inline: 0.75rem;
  color: rgb(255 255 255 / 0.6);
  font: 700 var(--fs-xs) var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dash-nav__list {
  display: grid;
  gap: 0.25rem;
}

.dash-nav__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-s);
  color: var(--c-on-dark-2);
  font: 650 var(--fs-sm) / 1.3 var(--font-display);
  text-decoration: none;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.dash-nav__link .icon {
  color: rgb(255 255 255 / 0.6);
}

.dash-nav__link:hover {
  background: rgb(255 255 255 / 0.08);
  color: var(--c-on-color);
}

/* The page you're on: the primary fill, which carries white text in every scheme. */
.dash-nav__link[aria-current="page"] {
  background: var(--c-primary-fill);
  color: var(--c-on-color);
}

.dash-nav__link[aria-current="page"] .icon {
  color: var(--c-on-color);
}

/* New candidates and open tasks; accent fills carry navy text. */
.dash-nav__count {
  min-width: 1.5rem;
  margin-inline-start: auto;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--c-accent);
  color: var(--c-deep);
  font: 800 var(--fs-xs) / 1.4 var(--font-display);
  text-align: center;
}

/* The signed-in consultant at the foot of the panel, with sign out. */
.dash-nav__user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
  padding: 1rem 0.75rem 0;
  border-top: 1px solid rgb(255 255 255 / 0.1);
}

.dash-nav__user p {
  display: grid;
  flex: 1;
  min-width: 0;
  font-size: var(--fs-xs);
  line-height: 1.4;
}

.dash-nav__user strong {
  color: var(--c-on-color);
  font: 700 var(--fs-sm) var(--font-display);
}

.dash-nav__signout {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-s);
  color: var(--c-on-dark-2);
}

.dash-nav__signout:hover {
  background: rgb(255 255 255 / 0.08);
  color: var(--c-on-color);
}

/* Small round portraits (the consultant photos) or initials. */
.dash-avatar {
  width: 2.5rem;
  height: 2.5rem;
}

.person__initials.dash-avatar {
  font-size: var(--fs-xs);
}

/* ----------------------------------------------------------------
	Dashboard Top Bar
---------------------------------------------------------------- */

/* Sticks to the top while the content scrolls. The notifications menu takes its
   position from the bar (see Notifications), so it never runs off a phone screen. */
.dash-top {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 4.5rem;
  padding: 0.75rem var(--dash-pad);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-white);
}

/* The logo shows here while the sidebar is hidden, the mark alone below 576px. */
.dash-top__brand .brand__name {
  display: none;
}

@media (min-width: 576px) {
  .dash-top__brand .brand__name {
    display: inline;
  }
}

.dash-top__date {
  display: none;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-text-2);
  font: 650 var(--fs-sm) var(--font-display);
}

.dash-top__date .icon {
  color: var(--c-primary);
}

@media (min-width: 768px) {
  .dash-top__date {
    display: flex;
  }
}

.dash-top__actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-inline-start: auto;
}

.dash-top__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--c-navy);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.dash-top__icon:hover,
.dash-top__icon[aria-expanded="true"] {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

/* The count of new notifications, on the bell's corner. */
.dash-top__dot {
  position: absolute;
  top: -0.4375rem;
  inset-inline-end: -0.4375rem;
  display: grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding-inline: 0.25rem;
  border: 2px solid var(--c-white);
  border-radius: 999px;
  background: var(--c-accent);
  color: var(--c-deep);
  font: 800 0.6875rem / 1 var(--font-display);
}

/* The signed-in consultant, opening their profile. */
.dash-top__user {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding-inline-start: 0.875rem;
  border-inline-start: 1px solid var(--c-line);
  color: inherit;
  text-decoration: none;
}

.dash-top__user:hover strong {
  color: var(--c-primary);
}

.dash-top__user p {
  display: none;
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  line-height: 1.35;
}

.dash-top__user strong {
  color: var(--c-navy);
  font: 700 var(--fs-sm) var(--font-display);
}

@media (min-width: 576px) {
  .dash-top__user p {
    display: grid;
  }
}

/* ----------------------------------------------------------------
	Notifications
---------------------------------------------------------------- */

/* The dropdown hangs from the top bar's right edge rather than from the bell
   (its .dropdown is static), so it stays on screen at any width. */
.dash-alerts {
  position: static;
}

.dash-alerts .dash-alerts__menu {
  inset-inline-end: var(--dash-pad);
  inset-inline-start: auto;
  width: min(22rem, 100% - 2 * var(--dash-pad));
  margin-top: -0.25rem;
  padding: 0.5rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  background: var(--c-white);
  box-shadow: var(--shadow-float);
}

.dash-alerts__title {
  padding: 0.5rem 0.75rem;
  color: var(--c-navy);
  font: 800 var(--fs-sm) var(--font-display);
}

.dash-alerts__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-s);
  color: var(--c-text);
  font-size: var(--fs-sm);
  line-height: 1.4;
  white-space: normal;
}

.dash-alerts__item .icon {
  margin-top: 0.0625rem;
  color: var(--c-primary);
}

.dash-alerts__item > span > span {
  display: block;
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

.dash-alerts__item:hover,
.dash-alerts__item:focus {
  background: var(--c-tint);
  color: var(--c-navy);
}

/* ----------------------------------------------------------------
	Dashboard Page Title and Cards
---------------------------------------------------------------- */

.dash-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}

.dash-head .breadcrumb {
  margin-bottom: 0.5rem;
}

.dash-head__title {
  margin: 0;
  color: var(--c-navy);
  font: 800 clamp(1.625rem, 1.35rem + 1vw, 2.125rem) / 1.15 var(--font-display);
  letter-spacing: -0.02em;
}

.dash-head__lead {
  margin-top: 0.375rem;
  color: var(--c-text-2);
}

.dash-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

/* A white card with a heading row; figure and section cards share the look. */
.dash-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  margin: 0;
  padding: clamp(1rem, 0.7rem + 1vw, 1.5rem);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  background: var(--c-white);
}

.dash-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}

.dash-card__title {
  margin: 0;
  color: var(--c-navy);
  font: 800 1.125rem / 1.3 var(--font-display);
}

.dash-card__note,
.dash-card__foot {
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

.dash-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--c-primary);
  font: 700 var(--fs-sm) var(--font-display);
  text-decoration: none;
}

.dash-card__link:hover {
  text-decoration: underline;
}

/* ----------------------------------------------------------------
	Stat Tiles
---------------------------------------------------------------- */

/* Two to a row, four from 1200px, one on the narrowest phones. The figures use
   the font's own proportional digits, which sit better at this size. */
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dash-gap, 1rem);
}

@media (max-width: 379.98px) {
  .stat-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 1200px) {
  .stat-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.stat-tile {
  display: grid;
  align-content: start;
  gap: 0.375rem;
  padding: clamp(1rem, 0.7rem + 1vw, 1.5rem);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  background: var(--c-white);
}

.stat-tile dt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--c-text-2);
  font: 650 var(--fs-sm) / 1.3 var(--font-display);
}

.stat-tile__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-s);
  background: var(--c-tint);
  color: var(--c-primary);
}

.stat-tile__value {
  margin-top: 0.375rem;
  color: var(--c-navy);
  font: 800 clamp(1.75rem, 1.45rem + 0.9vw, 2.25rem) / 1.1 var(--font-display);
  letter-spacing: -0.03em;
}

/* Up or down in words, the arrow after it in green for good news. */
.stat-tile__change {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.375rem;
  font: 700 var(--fs-xs) / 1.5 var(--font-display);
}

.stat-tile__change--good {
  color: var(--c-mint-ink);
}

.stat-tile__change--bad {
  color: var(--c-accent-ink);
}

.stat-tile__change span {
  color: var(--c-text-3);
  font: 500 var(--fs-xs) var(--font-text);
}

/* ----------------------------------------------------------------
	Column Chart
---------------------------------------------------------------- */

/* Axis ticks on the left, the bars on hairline gridlines (one per tick, from
   --ticks) above a firmer baseline, and the week labels under them. Bars are at
   most 1.5rem wide with rounded tops; the value of a bar shows on hover. */
.col-chart__summary {
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.col-chart__plot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 12.5rem auto;
  gap: 0.625rem 0.75rem;
  padding-top: 1.75rem;
}

/* One line of text per tick: the list is a line taller than the plot and
   starts half a line higher, so each number centres on its gridline. */
.col-chart__ticks {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  grid-area: 1 / 1;
  height: calc(100% + 1em);
  margin-top: -0.5em;
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: end;
}

.col-chart__bars {
  display: flex;
  align-items: flex-end;
  grid-area: 1 / 2;
  border-bottom: 1px solid var(--c-line-strong);
  background: linear-gradient(var(--c-line) 1px, transparent 1px) 0 0 / 100% calc(100% / var(--ticks));
}

.col-chart__bars > li {
  position: relative;
  display: flex;
  flex: 1;
  justify-content: center;
  height: var(--h);
}

.col-chart__bars > li::before {
  content: "";
  width: min(1.5rem, 64%);
  border-radius: 4px 4px 0 0;
  background: var(--c-primary);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.col-chart__bars > li:hover::before {
  background: color-mix(in oklab, var(--c-primary) 70%, var(--c-white));
}

/* The tooltip: the bar's data-tip above it, kept inside the card at the ends. */
.col-chart__bars > li::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  z-index: 1;
  padding: 0.375rem 0.625rem;
  border-radius: var(--radius-s);
  background: var(--c-deep);
  color: var(--c-on-color);
  font: 700 var(--fs-xs) / 1.2 var(--font-display);
  white-space: nowrap;
  opacity: 0;
  translate: -50% 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.col-chart__bars > li:hover::after {
  opacity: 1;
}

.col-chart__bars > li:nth-child(-n+3)::after {
  left: 0;
  translate: none;
}

.col-chart__bars > li:nth-last-child(-n+3)::after {
  right: 0;
  left: auto;
  translate: none;
}

.col-chart__value {
  position: absolute;
  bottom: calc(100% + 0.25rem);
  color: var(--c-navy);
  font: 800 var(--fs-sm) / 1 var(--font-display);
}

.col-chart__bars > li:hover .col-chart__value {
  visibility: hidden;
}

/* Every other week's date, ending on the latest; every third below 576px.
   Hidden labels keep their place, so each date stays under its bar. */
.col-chart__labels {
  display: flex;
  grid-area: 2 / 2;
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

/* min-width: 0 keeps each slot as wide as its bar; a longer date overflows it
   evenly on both sides (flex centring), into the hidden neighbours' room. */
.col-chart__labels li {
  display: flex;
  flex: 1;
  justify-content: center;
  min-width: 0;
  white-space: nowrap;
}

.col-chart__labels li:nth-last-child(even) {
  visibility: hidden;
}

@media (max-width: 575.98px) {
  .col-chart__labels li:nth-last-child(odd) {
    visibility: hidden;
  }

  .col-chart__labels li:nth-last-child(3n+1) {
    visibility: visible;
  }
}

/* "Show the numbers": the chart as a table, for anyone who can't see or hover it. */
.chart-table summary {
  width: fit-content;
  color: var(--c-primary);
  font: 700 var(--fs-sm) var(--font-display);
  cursor: pointer;
}

.chart-table .table-responsive {
  margin-top: 0.75rem;
}

/* ----------------------------------------------------------------
	Funnel
---------------------------------------------------------------- */

/* Each stage a bar from the same baseline, rounded at its end, in steps of the
   primary colour from dark to light so the order reads in the colour too. */
.funnel {
  display: grid;
  gap: 1rem;
}

.funnel__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.375rem;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.funnel__head strong {
  color: var(--c-navy);
  font: 800 1rem var(--font-display);
  font-variant-numeric: tabular-nums;
}

.funnel__bar {
  display: block;
  width: var(--w);
  height: 1rem;
  border-radius: 0 4px 4px 0;
  background: var(--c-primary);
}

.funnel__step:nth-child(2) .funnel__bar {
  background: color-mix(in oklab, var(--c-primary) 85%, var(--c-white));
}

.funnel__step:nth-child(3) .funnel__bar {
  background: color-mix(in oklab, var(--c-primary) 70%, var(--c-white));
}

.funnel__step:nth-child(4) .funnel__bar {
  background: color-mix(in oklab, var(--c-primary) 57%, var(--c-white));
}

.funnel__step:nth-child(5) .funnel__bar {
  background: color-mix(in oklab, var(--c-primary) 45%, var(--c-white));
}

.funnel__rate {
  margin-top: 0.375rem;
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

/* ----------------------------------------------------------------
	Dashboard Tables
---------------------------------------------------------------- */

/* Bootstrap's .table (see Tables in 37) a little denser, with a quiet head row.
   Half a rem at the sides helps the tables fit beside the sidebar. */
.dash-table > :not(caption) > * > * {
  padding: 0.75rem 0.5rem;
  font-size: var(--fs-sm);
  vertical-align: middle;
}

.dash-table thead th {
  border-bottom: 1px solid var(--c-line-strong);
}

.dash-table tbody tr:last-child > * {
  border-bottom: 0;
}

.dash-table td a {
  color: var(--c-navy);
  font-weight: 700;
  text-decoration: none;
}

.dash-table td a:hover {
  color: var(--c-primary);
  text-decoration: underline;
}

.dash-table__num {
  font-variant-numeric: tabular-nums;
  text-align: end;
}

/* A job title with a line under it may wrap, so the table fits sooner. */
.dash-table td:has(> .cand__meta) {
  min-width: 10rem;
  white-space: normal;
}

/* A received time may drop below its day ("Yesterday," over "2.05pm") when the
   table is short of room; 6.5rem keeps a date such as "Wed 30 Sep" on one line. */
.dash-table td:has(> time) {
  min-width: 6.5rem;
  white-space: normal;
}

.dash-table__empty td {
  padding: 2rem 1rem;
  color: var(--c-text-2);
  text-align: center;
  white-space: normal;
}

/* A candidate: initials, name and a line under it. */
.cand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cand__meta {
  display: block;
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

.cand-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--c-tint);
  color: var(--c-primary);
  font: 800 var(--fs-xs) var(--font-display);
}

.cand-avatar--lg {
  width: 4.5rem;
  height: 4.5rem;
  font-size: 1.375rem;
}

/* A consultant: photo and name, opening their profile. */
.dash-person {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-navy);
  text-decoration: none;
}

.dash-table td .dash-person {
  font-weight: 400;
}

.dash-person:hover {
  color: var(--c-primary);
  text-decoration: underline;
}

.dash-person .dash-avatar {
  width: 2rem;
  height: 2rem;
}

/* The larger one on a candidate's profile, with the role under the name. */
.dash-person--lg {
  gap: 0.75rem;
  font-size: var(--fs-sm);
  line-height: 1.35;
}

.dash-person--lg .dash-avatar {
  width: 3rem;
  height: 3rem;
}

.dash-person--lg strong {
  display: block;
  font: 700 1rem var(--font-display);
}

.dash-person--lg span span {
  color: var(--c-text-3);
}

/* Places filled: a short bar and the count. */
.fill {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 9rem;
}

.fill .progress {
  flex: 1;
}

.fill span {
  color: var(--c-text-2);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------
	Status and Checks
---------------------------------------------------------------- */

/* A candidate's status on Bootstrap's .badge: the word says it, the tint helps. */
.status {
  gap: 0.375rem;
}

.status::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: currentColor;
}

.status--new {
  background: var(--c-tint);
  color: var(--c-primary);
}

.status--screening {
  background: var(--c-sun-soft);
  color: var(--c-sun-ink);
}

.status--interview {
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
}

.status--offer {
  background: transparent;
  color: var(--c-mint-ink);
  box-shadow: inset 0 0 0 1.5px var(--c-mint-ink);
}

.status--placed,
.status--available {
  background: var(--c-mint-soft);
  color: var(--c-mint-ink);
}

.status--closed {
  background: var(--c-surface);
  color: var(--c-text-3);
}

/* A check: an icon in the state's colour and the words, which carry the meaning. */
.check-state {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-text);
  font-size: var(--fs-sm);
}

.check-state--done .icon {
  color: var(--c-mint-ink);
}

.check-state--wait .icon {
  color: var(--c-sun-ink);
}

.check-state--warn,
.check-state--warn .icon {
  color: var(--c-accent-ink);
  font-weight: 700;
}

.check-state--none {
  color: var(--c-text-3);
}

/* ----------------------------------------------------------------
	Agenda
---------------------------------------------------------------- */

.agenda__item {
  display: flex;
  gap: 1rem;
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--c-line);
}

.agenda__item:first-child {
  padding-top: 0;
}

.agenda__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.agenda__time {
  display: grid;
  flex: none;
  align-content: center;
  width: 5rem;
  padding: 0.5rem;
  border-radius: var(--radius-s);
  background: var(--c-tint);
  color: var(--c-text-2);
  font-size: var(--fs-xs);
  line-height: 1.3;
  text-align: center;
}

.agenda__time strong {
  color: var(--c-primary);
  font: 800 1rem var(--font-display);
}

.agenda__name {
  color: var(--c-navy);
  font: 700 var(--fs-sm) var(--font-display);
  text-decoration: none;
}

.agenda__name:hover {
  color: var(--c-primary);
  text-decoration: underline;
}

.agenda__item p {
  color: var(--c-text-2);
  font-size: var(--fs-xs);
}

.agenda__where {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  margin-top: 0.25rem;
}

.agenda__where .icon {
  color: var(--c-primary);
}

/* ----------------------------------------------------------------
	Tasks
---------------------------------------------------------------- */

/* The figures over the list: open, due today, overdue and done. */
.task-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .task-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.task-stats > div {
  display: grid;
  gap: 0.125rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius-m);
  background: var(--c-surface);
}

.task-stats dt {
  color: var(--c-text-2);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.task-stats dd {
  color: var(--c-navy);
  font: 800 1.5rem / 1.1 var(--font-display);
}

.task-stats__item--overdue dd {
  color: var(--c-accent-ink);
}

.task-stats__item--done dd {
  color: var(--c-mint-ink);
}

/* The groups of the tasks page: Overdue, Today, Tomorrow, Later, No date, Done. */
.task-group + .task-group {
  margin-top: 1.25rem;
}

.task-group__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.25rem;
  color: var(--c-text-2);
  font: 800 var(--fs-xs) / 1.4 var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.task-group__count {
  min-width: 1.5rem;
  padding: 0 0.4375rem;
  border-radius: 999px;
  background: var(--c-surface);
  letter-spacing: 0;
  text-align: center;
}

.task-group--overdue .task-group__title {
  color: var(--c-accent-ink);
}

.task-group--overdue .task-group__count {
  background: var(--c-accent-soft);
}

/* A task: the tick, the task with its details, who it is for and its buttons.
   The stripe at the start repeats the priority, which is also written out. */
.task {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: start;
  gap: 0.75rem;
  padding: 0.75rem 0.25rem 0.75rem 0.75rem;
  border-bottom: 1px solid var(--c-line);
  border-inline-start: 3px solid var(--c-line-strong);
}

.task:last-child {
  border-bottom: 0;
}

.task--high {
  border-inline-start-color: var(--c-accent);
}

.task--medium {
  border-inline-start-color: var(--c-sun-ink);
}

.task__tick {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.1875rem 0 0;
}

.task__body {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

.task__title {
  color: var(--c-navy);
  font: 650 var(--fs-sm) / 1.4 var(--font-display);
  overflow-wrap: anywhere;
  cursor: pointer;
}

/* A ticked task fades and is struck through (:has(), so it shows without script). */
.task:has(.task__tick:checked) .task__title {
  color: var(--c-text-3);
  text-decoration: line-through;
}

.task__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.875rem;
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

.task__meta > * {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
}

.task__due--today {
  color: var(--c-navy);
  font-weight: 700;
}

.task__due--overdue {
  color: var(--c-accent-ink);
  font-weight: 700;
}

.task__priority {
  padding: 0 0.5rem;
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-text-2);
  font-weight: 700;
}

.task--high .task__priority {
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
}

.task--medium .task__priority {
  background: var(--c-sun-soft);
  color: var(--c-sun-ink);
}

.task__cand {
  color: var(--c-primary);
  font-weight: 650;
  text-decoration: none;
}

.task__cand:hover {
  text-decoration: underline;
}

.task__who .dash-avatar {
  width: 2rem;
  height: 2rem;
}

/* Edit, delete and pin, from script only: without it they would do nothing. */
.list-actions {
  display: none;
  gap: 0.125rem;
}

.js .list-actions {
  display: flex;
}

.list-action {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--c-text-3);
  cursor: pointer;
}

.list-action:hover {
  background: var(--c-tint);
  color: var(--c-primary);
}

.list-action--delete:hover {
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
}

.list-action[aria-pressed="true"] {
  color: var(--c-primary);
}

/* Phones: the buttons move under the task, beside who it is for. */
@media (max-width: 575.98px) {
  .task {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .task .list-actions {
    grid-column: 2 / -1;
    justify-content: flex-end;
    margin-top: -0.5rem;
  }
}

/* The add form and the edit window: the task on its own line, then its details. */
.task-form,
.note-form {
  display: grid;
  gap: 0.75rem;
}

.task-form:not(.task-form--modal),
.note-form:not(.note-form--modal):not(.note-form--candidate) {
  padding: 1rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  background: var(--c-surface);
}

.task-form__fields,
.note-form__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  align-items: end;
  gap: 0.75rem;
}

.dash .form-control,
.dash .form-select {
  min-height: 2.75rem;
  padding-block: 0.5rem;
  font-size: var(--fs-sm);
}

.dash textarea.form-control {
  min-height: 6rem;
}

.task-form__submit,
.note-form__submit {
  justify-self: start;
}

.note-form__pin {
  align-self: center;
}

.note-form__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 0.5rem;
}

.modal-actions__delete {
  margin-inline-start: auto;
}

.modal-actions__delete:hover {
  border-color: var(--c-accent-ink);
  color: var(--c-accent-ink);
}

/* The overview's and the candidate profile's short lists sit in narrower cards;
   on a candidate's own profile their name on each task and note is left out. */
.tasks--compact .task {
  padding-inline-end: 0;
}

[data-task-view="candidate"] .task__cand,
[data-note-view="candidate"] .note__cand {
  display: none;
}

.dash-card--list {
  gap: 1.25rem;
}

/* ----------------------------------------------------------------
	Notes
---------------------------------------------------------------- */

/* Cards with a stripe in their category's colour; the category is also written. */
.notes {
  display: grid;
  gap: 0.75rem;
}

.notes--board {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  align-items: start;
}

.note {
  --note-tone: var(--c-line-strong);
  display: grid;
  align-content: start;
  gap: 0.625rem;
  padding: 1rem 1rem 0.75rem;
  border: 1px solid var(--c-line);
  border-top: 4px solid var(--note-tone);
  border-radius: var(--radius-m);
  background: var(--c-white);
}

.note--client {
  --note-tone: var(--c-primary);
}

.note--candidate {
  --note-tone: var(--c-accent);
}

.note--branch {
  --note-tone: var(--c-mint-ink);
}

.note--reminder {
  --note-tone: var(--c-sun-ink);
}

.note--pinned {
  background: color-mix(in srgb, var(--c-tint) 55%, var(--c-white));
}

.note__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.note__cat {
  color: var(--c-text-2);
  font: 800 var(--fs-xs) var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.note__pinned {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--c-primary);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.note__text {
  color: var(--c-text);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.note__cand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.3125rem;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background: var(--c-tint);
  color: var(--c-primary);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-decoration: none;
}

.note__cand:hover {
  text-decoration: underline;
}

.note__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--c-line);
}

.note__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

.note__meta .dash-avatar {
  width: 1.75rem;
  height: 1.75rem;
}

/* Who wrote it over when. */
.note__meta > span:last-child {
  display: grid;
  line-height: 1.3;
}

.note__meta strong {
  color: var(--c-navy);
  font-weight: 650;
}

/* Shown in place of a list with nothing in it (functions.js sets hidden). */
.list-empty {
  padding: 1rem;
  border: 1.5px dashed var(--c-line-strong);
  border-radius: var(--radius-m);
  color: var(--c-text-3);
  font-size: var(--fs-sm);
  text-align: center;
}

/* ----------------------------------------------------------------
	Candidate Filters
---------------------------------------------------------------- */

/* The toolbars over the candidates, tasks and notes. Their buttons reuse the
   filter chips (13. Jobs) as toggle buttons. */
.cand-filters,
.list-tools {
  display: grid;
  gap: 0.875rem;
}

.cand-filters .filters,
.list-tools .filters {
  margin-bottom: 0;
}

.cand-filters .filter,
.list-tools .filter {
  gap: 0.5rem;
  background: none;
  cursor: pointer;
}

.cand-filters .filter--active,
.list-tools .filter--active {
  background: var(--c-primary-fill);
}

.filter__count {
  font-weight: 500;
}

.cand-filters__fields,
.list-tools__fields {
  display: grid;
  gap: 0.625rem;
}

@media (min-width: 768px) {
  .cand-filters__fields {
    grid-template-columns: minmax(0, 1fr) 16rem;
  }

  .list-tools__fields--tasks {
    grid-template-columns: minmax(0, 1fr) 12rem 12rem;
  }
}

.cand-search,
.list-search {
  position: relative;
}

.cand-search .icon,
.list-search .icon {
  position: absolute;
  top: 50%;
  inset-inline-start: 1rem;
  color: var(--c-text-3);
  translate: 0 -50%;
  pointer-events: none;
}

.cand-search .form-control,
.list-search .form-control {
  padding-inline-start: 2.75rem;
}

/* ----------------------------------------------------------------
	Candidate Profile
---------------------------------------------------------------- */

.profile-head {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .profile-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .profile-head .stages {
    grid-column: 1 / -1;
  }
}

.profile-head__who {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.profile-head__applied {
  color: var(--c-navy);
  font: 700 1.0625rem / 1.4 var(--font-display);
}

.profile-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.5rem;
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}

.profile-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

/* The five stages, joined by a line that turns primary as each is done. */
.stages {
  display: flex;
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-line);
}

.stages__step {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-text-3);
  font: 650 var(--fs-xs) / 1.3 var(--font-display);
  text-align: center;
}

.stages__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0.8125rem;
  right: calc(-50% + 1.125rem);
  left: calc(50% + 1.125rem);
  height: 2px;
  background: var(--c-line-strong);
}

.stages__step--done:not(:last-child)::after {
  background: var(--c-primary);
}

.stages__dot {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid var(--c-line-strong);
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-on-color);
  font-size: 0.75rem;
}

.stages__step--done {
  color: var(--c-text-2);
}

.stages__step--done .stages__dot {
  border-color: var(--c-primary-fill);
  background: var(--c-primary-fill);
}

/* The current stage: a ring round a dot. */
.stages__step--current {
  color: var(--c-navy);
}

.stages__step--current .stages__dot {
  border-color: var(--c-primary);
  box-shadow: inset 0 0 0 4px var(--c-white), inset 0 0 0 12px var(--c-primary);
}

.stages__step--stopped {
  color: var(--c-accent-ink);
}

.stages__step--stopped .stages__dot {
  border-color: var(--c-accent-ink);
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
}

/* What the candidate wrote on the CV form, then their experience and their CV. */
.profile-quote {
  margin: 0;
  padding: 1rem 1.25rem;
  border-inline-start: 3px solid var(--c-accent);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  background: var(--c-surface);
  color: var(--c-text);
}

.profile-jobs {
  display: grid;
  gap: 0.875rem;
}

.profile-jobs li {
  display: grid;
  gap: 0.125rem;
  padding-inline-start: 1rem;
  border-inline-start: 2px solid var(--c-line-strong);
}

.profile-jobs strong {
  color: var(--c-navy);
  font: 700 var(--fs-sm) var(--font-display);
}

.profile-jobs span {
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

.cv-file {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
}

.cv-file__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-s);
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
}

.cv-file strong {
  display: block;
  color: var(--c-navy);
  font: 700 var(--fs-sm) var(--font-display);
  overflow-wrap: anywhere;
}

.cv-file span span {
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

/* The checks: label over state, one per row. */
.checklist li {
  display: grid;
  gap: 0.25rem;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--c-line);
}

.checklist li:first-child {
  padding-top: 0;
}

.checklist li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.checklist__label {
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.interview {
  display: grid;
  gap: 0.375rem;
}

.interview strong {
  color: var(--c-navy);
  font: 800 1.125rem var(--font-display);
}

.interview span {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.interview .icon {
  color: var(--c-primary);
}

.agent-contact {
  display: grid;
  gap: 0.5rem;
  font-size: var(--fs-sm);
}

.agent-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-navy);
  text-decoration: none;
}

.agent-contact a:hover {
  color: var(--c-primary);
  text-decoration: underline;
}

.agent-contact .icon {
  color: var(--c-primary);
}

/* ----------------------------------------------------------------
	Consultant Profile
---------------------------------------------------------------- */

/* The portrait beside where they are today, the first part of their bio and
   their specialisms; stacked on phones. */
.agent-head {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .agent-head {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem;
  }
}

.agent-head__photo {
  width: 6.5rem;
  height: 6.5rem;
  border: 4px solid var(--c-tint);
}

.agent-head__text {
  display: grid;
  gap: 0.875rem;
}

.agent-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.agent-head__where {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.agent-head__meta .icon {
  color: var(--c-primary);
}

.agent-head__bio,
.agent-about {
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

/* Where the consultant is today: out visiting clients, or on leave. */
.status--available[data-state="clients"] {
  background: var(--c-sun-soft);
  color: var(--c-sun-ink);
}

.status--available[data-state="leave"] {
  background: var(--c-surface);
  color: var(--c-text-3);
}

/* ----------------------------------------------------------------
	Edit Profile
---------------------------------------------------------------- */

.profile-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-grid .form-field--full {
    grid-column: 1 / -1;
  }
}

/* The photo: the current one, round, over the file input. */
.photo-field {
  display: grid;
  justify-items: center;
  gap: 1rem;
}

.photo-field__preview {
  width: 8rem;
  height: 8rem;
  border: 4px solid var(--c-tint);
}

.photo-field .file-drop {
  justify-self: stretch;
}

.profile-form__actions {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.profile-form__reset {
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  text-decoration: underline;
  cursor: pointer;
}

/* ================================================================
	44. Candidate Portal
================================================================ */

/* The job seeker's pages in account/. They use the dashboard's layout, cards,
   tiles, statuses and lists (43), plus the parts below. */

/* ----------------------------------------------------------------
	Portal Figures
---------------------------------------------------------------- */

/* The line under a figure on the portal's tiles, where the dashboard's show
   the change on the month before. */
.stat-tile__note {
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

/* ----------------------------------------------------------------
	Applications
---------------------------------------------------------------- */

/* One application after another, ruled off: the job and its status, the
   stages, the next step, then the history and Withdraw. */
.app-list {
  display: grid;
}

.app-card {
  display: grid;
  gap: 1.25rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--c-line);
}

.app-card:first-child {
  padding-top: 0;
  border-top: 0;
}

.app-card:last-child {
  padding-bottom: 0;
}

/* The logo, the job and the badge; on phones the badge goes under the job. */
.app-card__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.75rem 1rem;
}

.app-card__head .app-status {
  grid-column: 2;
  justify-self: start;
}

@media (min-width: 576px) {
  .app-card__head {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .app-card__head .app-status {
    grid-column: auto;
  }
}

.app-card__title {
  margin: 0;
  font: 800 1.125rem / 1.3 var(--font-display);
}

.app-card__title a {
  color: var(--c-navy);
  text-decoration: none;
}

.app-card__title a:hover {
  color: var(--c-primary);
  text-decoration: underline;
}

.app-card__meta {
  margin-top: 0.25rem;
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}

/* The stages sit in the card without the rule the candidate profile puts over them. */
.app-card .stages {
  padding-top: 0;
  border-top: 0;
}

/* What happens next, on the page colour; a dated step gets the calendar. Once
   the application is withdrawn, the note under it takes its place. */
.app-card__next,
.app-card__gone {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem;
  border-radius: var(--radius-m);
  background: var(--c-surface);
}

.app-card__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-s);
  background: var(--c-tint);
  color: var(--c-primary);
}

.app-card__next p {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.app-card__next strong {
  color: var(--c-navy);
  font: 700 1rem / 1.35 var(--font-display);
}

.app-card__next p .icon {
  margin-inline-end: 0.375rem;
  color: var(--c-primary);
}

.app-card__gone {
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.app-card__gone .icon {
  margin-top: 0.25rem;
  color: var(--c-text-3);
}

.app-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

/* The history: a disclosure with the dated events on a thin line. */
.app-history summary {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  color: var(--c-primary);
  font: 700 var(--fs-sm) var(--font-display);
  cursor: pointer;
}

.app-history ol {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding-inline-start: 1rem;
  border-inline-start: 2px solid var(--c-line-strong);
}

.app-history li {
  display: grid;
  gap: 0.125rem;
  color: var(--c-text);
  font-size: var(--fs-sm);
}

.app-history time {
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

/* Withdraw comes with script, as without it the button would do nothing. */
.app-card__withdraw {
  display: none;
}

.js .app-card__withdraw {
  display: inline-flex;
}

.app-card__withdraw:hover {
  border-color: var(--c-accent-ink);
  color: var(--c-accent-ink);
}

/* The overview's short list: logo, job and next step, status. */
.app-rows {
  display: grid;
}

.app-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.875rem;
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--c-line);
}

.app-row:first-child {
  padding-top: 0;
}

.app-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.app-row__job {
  min-width: 0;
}

.app-row__title {
  color: var(--c-navy);
  font: 700 var(--fs-sm) / 1.35 var(--font-display);
  text-decoration: none;
}

.app-row__title:hover {
  color: var(--c-primary);
  text-decoration: underline;
}

@media (max-width: 575.98px) {
  .app-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .app-row .app-status {
    grid-column: 2;
    justify-self: start;
  }
}

/* ----------------------------------------------------------------
	Shifts
---------------------------------------------------------------- */

/* A shift: the date as a calendar leaf, the hours, role and site, then the pay
   (and an offer's buttons), which drop under the shift below 768px. */
.shift-list {
  display: grid;
}

.shift {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.75rem 1rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--c-line);
}

.shift:first-child {
  padding-top: 0;
}

.shift:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* The overview's list, a little tighter. */
.shift-list--compact .shift {
  padding-block: 0.75rem;
}

@media (min-width: 768px) {
  .shift {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
  }
}

.shift__date {
  display: grid;
  align-content: center;
  justify-items: center;
  width: 3.5rem;
  min-height: 4rem;
  border-radius: var(--radius-m);
  background: var(--c-surface);
  color: var(--c-text-2);
  font: 700 var(--fs-xs) / 1.2 var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shift__date strong {
  color: var(--c-navy);
  font: 800 1.375rem / 1.1 var(--font-display);
  letter-spacing: 0;
}

/* Today's shift in the primary fill, an offer in the accent's tint. */
.shift--today .shift__date {
  background: var(--c-primary-fill);
}

.shift--today .shift__date,
.shift--today .shift__date strong {
  color: var(--c-on-color);
}

.shift--offer .shift__date {
  background: var(--c-accent-soft);
}

.shift--offer .shift__date,
.shift--offer .shift__date strong {
  color: var(--c-accent-ink);
}

.shift__body {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.shift__time {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.625rem;
  color: var(--c-navy);
  font: 800 1rem / 1.35 var(--font-display);
}

.shift__role {
  color: var(--c-text);
  font-size: var(--fs-sm);
}

.shift__site {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

.shift__site a {
  color: var(--c-primary);
  font-weight: 700;
}

.shift__aside {
  display: grid;
  grid-column: 2;
  justify-items: start;
  gap: 0.375rem;
}

@media (min-width: 768px) {
  .shift__aside {
    grid-column: auto;
    justify-items: end;
    text-align: end;
  }
}

.shift__rate {
  color: var(--c-navy);
  font: 800 1.125rem / 1.2 var(--font-display);
}

.shift__rate span {
  color: var(--c-text-3);
  font: 600 var(--fs-xs) var(--font-text);
}

.shift__note {
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

/* Take shift and Turn down come with script, which keeps the answer. */
.shift__actions {
  display: none;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.js .shift__actions {
  display: flex;
}

/* ----------------------------------------------------------------
	Availability
---------------------------------------------------------------- */

/* A box per day and slot, with the slots' hours in a note under them. */
.availability {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 1rem;
}

.availability .table-responsive {
  justify-self: stretch;
}

.availability__table th[scope="col"],
.availability__table td {
  text-align: center;
}

/* Tight cells, so the four columns fit the side column from 1200px. */
.availability__table > :not(caption) > * > * {
  padding-inline: 0.25rem;
}

.availability__table .form-check-input {
  float: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  vertical-align: middle;
}

/* ----------------------------------------------------------------
	Timesheet
---------------------------------------------------------------- */

/* minmax(0, 1fr): the table scrolls inside its box instead of widening the page. */
.timesheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

.timesheet__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

/* Narrow cells and fields, so the week fits beside the holiday card from 1400px
   even where a time reads "02:00 PM": Firefox draws that field 30px wider. */
.timesheet__table > :not(caption) > * > * {
  padding-inline: 0.5rem;
}

.timesheet__table .form-control {
  min-width: 7rem;
  padding-inline: 0.5rem;
}

.timesheet__table input[type="number"] {
  width: 4.75rem;
  min-width: 4.75rem;
}

.timesheet__table tfoot > tr > * {
  border-top: 1px solid var(--c-line-strong);
  border-bottom: 0;
  color: var(--c-navy);
  font: 800 var(--fs-sm) var(--font-display);
}

/* A sent timesheet locks, and its fields read as plain text. */
.timesheet--sent .form-control:disabled {
  border-color: transparent;
  background: transparent;
  color: var(--c-text);
  opacity: 1;
}

.timesheet__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

/* ----------------------------------------------------------------
	Payslips
---------------------------------------------------------------- */

/* A label and an amount per line; gross pay ruled off, net pay set large. */
.payslip {
  display: grid;
  margin: 0;
}

.payslip__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.625rem;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-sm);
}

.payslip__row dt {
  color: var(--c-text-2);
  font-weight: 400;
}

.payslip__row dd {
  margin: 0;
  color: var(--c-navy);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

.payslip__row--sub {
  border-bottom-color: var(--c-line-strong);
}

.payslip__row--sub dt {
  color: var(--c-navy);
  font-weight: 700;
}

.payslip__row--total {
  padding-top: 0.875rem;
  border-bottom: 0;
}

.payslip__row--total dt,
.payslip__row--total dd {
  color: var(--c-navy);
  font: 800 1.125rem var(--font-display);
}

.payslip--compact .payslip__row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.payslip__week {
  margin-bottom: 0.5rem;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.payslip__note {
  margin-top: 1rem;
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

/* A scrolling table holds its screen-reader labels (absolutely placed, so they
   would take their place from outside the scroll box) and can't stretch the
   page sideways on phones. */
.timesheet .table-responsive,
.availability .table-responsive,
.payslips {
  position: relative;
}

/* The payslips table: each week's pay day under its status. */
.payslips__state .cand__meta {
  margin-top: 0.25rem;
}

/* Its dates keep one line at their own width: the job-title rule in Dashboard
   Tables (10rem, wrapping) would make the table too wide beside the sidebar. */
.payslips td:has(> .cand__meta) {
  min-width: 0;
  white-space: nowrap;
}

/* ----------------------------------------------------------------
	Holiday
---------------------------------------------------------------- */

/* Two figures to a row in the narrow column beside the timesheet. */
@media (min-width: 1400px) {
  .holiday__figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.holiday__note {
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.holiday__list {
  display: grid;
}

.holiday__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-sm);
}

.holiday__item:first-child {
  padding-top: 0;
}

.holiday__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.holiday__item > span:first-child {
  display: grid;
  color: var(--c-text-3);
}

.holiday__item strong {
  color: var(--c-navy);
  font-family: var(--font-display);
}

/* A request just sent: its badge and the button that cancels it. */
.holiday__item .list-action {
  width: 2rem;
  height: 2rem;
}

.holiday__state {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.holiday__request,
.account-data .btn {
  align-self: flex-start;
}

/* ----------------------------------------------------------------
	Job Alerts
---------------------------------------------------------------- */

/* A card per alert with a stripe that greys out while it is paused. */
.job-alerts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  align-items: start;
  gap: 0.75rem;
}

.job-alert {
  display: grid;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--c-line);
  border-inline-start: 3px solid var(--c-primary);
  border-radius: var(--radius-m);
}

.job-alert--off {
  border-inline-start-color: var(--c-line-strong);
}

.job-alert__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.job-alert__title {
  margin: 0;
  color: var(--c-navy);
  font: 800 1rem / 1.35 var(--font-display);
  overflow-wrap: anywhere;
}

.job-alert--off .job-alert__title {
  color: var(--c-text-2);
}

/* Smaller chips than the profile's, so a card's terms share a line or two. */
.job-alert__terms span {
  padding: 0.3125rem 0.75rem;
  font-size: var(--fs-xs);
}

.job-alert__switch {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-text-2);
  font: 650 var(--fs-xs) var(--font-display);
}

.job-alert__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.job-alert__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.875rem;
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

.job-alert__meta > span {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
}

.job-alert__found {
  color: var(--c-mint-ink);
  font-weight: 700;
}

.job-alert--off .job-alert__found {
  color: var(--c-text-3);
}

/* Toggle switch: a checkbox drawn as a track with a knob (not the home hero's
   .switch, which is the Find a job / Hire talent tabs), both from the box's own
   background (the knob is a radial gradient), so it needs no extra markup.
   Checked, the knob moves to the end and the track fills. High contrast
   mode drops backgrounds, so it keeps the native box there. */
.toggle-switch {
  flex: none;
  width: 2.75rem;
  height: 1.5rem;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: radial-gradient(circle at 0.75rem 50%, var(--c-white) 0.5rem, transparent calc(0.5rem + 0.5px)) var(--c-text-3);
  appearance: none;
  cursor: pointer;
}

.toggle-switch:checked {
  background: radial-gradient(circle at calc(100% - 0.75rem) 50%, var(--c-on-color) 0.5rem, transparent calc(0.5rem + 0.5px)) var(--c-primary-fill);
}

.toggle-switch:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

@media (forced-colors: active) {
  .toggle-switch {
    appearance: auto;
  }
}

/* ----------------------------------------------------------------
	Documents
---------------------------------------------------------------- */

/* Files as the CV on the candidate profile (43), one per row; an upload
   waiting for a check shows its state and a remove button at the end. */
.files {
  display: grid;
  gap: 0.625rem;
}

/* An upload's state and button drop to their own line when the row is narrow. */
.files .cv-file {
  flex-wrap: wrap;
}

.files .check-state,
.files .list-action {
  margin-inline-start: auto;
}

.files .check-state {
  flex: none;
  font-size: var(--fs-xs);
}

/* ----------------------------------------------------------------
	Settings
---------------------------------------------------------------- */

.choice-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.choice-group legend {
  margin-bottom: 0.5rem;
}

/* What we may contact you about: the topic over how we send it. */
.contact-prefs {
  display: grid;
  gap: 0.875rem;
}

.contact-prefs .form-check-label {
  display: grid;
  gap: 0.125rem;
}

.contact-prefs strong {
  color: var(--c-navy);
  font: 700 var(--fs-sm) var(--font-display);
}

.contact-prefs .form-check-label span {
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

.account-delete:hover {
  border-color: var(--c-accent-ink);
  color: var(--c-accent-ink);
}

/* ================================================================
	45. Motion
================================================================ */

/* ----------------------------------------------------------------
	Keyframes
---------------------------------------------------------------- */

/* rise and pop bring the hero in, float drifts its cards, wipe draws the brush
   stroke and map-pulse rings the current branch pin. */
@keyframes rise {
  from {
    opacity: 0;
    translate: 0 1.25rem;
  }
}

@keyframes pop {
  from {
    opacity: 0;
    scale: 0.9;
  }
}

@keyframes float {
  to {
    translate: 0 -0.5rem;
  }
}

@keyframes map-pulse {
  from {
    opacity: 0.45;
    scale: 0.5;
  }

  to {
    opacity: 0;
    scale: 1.6;
  }
}

@keyframes wipe {
  from {
    clip-path: inset(0 100% 0 0);
  }
}

/* ----------------------------------------------------------------
	Animations
---------------------------------------------------------------- */

/* Runs only for visitors who have not asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero__content > * {
    animation: rise var(--dur-slow) var(--ease-out) both;
  }

  /* The hero copy rises in 70ms steps. */
  .hero__content > :nth-child(2) { animation-delay: 70ms; }
  .hero__content > :nth-child(3) { animation-delay: 140ms; }
  .hero__content > :nth-child(4) { animation-delay: 210ms; }
  .hero__content > :nth-child(5) { animation-delay: 280ms; }

  .title-mark::after {
    animation: wipe 900ms var(--ease-out) 500ms both;
  }

  .stage {
    animation: pop 900ms var(--ease-out) both;
  }

  .geo-map__pin--current::before {
    animation: map-pulse 2.4s ease-out infinite;
  }

  .hero__person {
    animation: rise 1s var(--ease-out) 150ms both;
  }

  .ticket--float,
  .hero__placed,
  .hero__rating {
    animation:
      pop var(--dur-slow) var(--ease-out) both,
      float 5s ease-in-out infinite alternate;
  }

  /* Two delays each: when the card pops in, then when it starts to float. */
  .ticket--float { animation-delay: 600ms, 1.3s; }
  .hero__placed { animation-delay: 800ms, 2s; }
  .hero__rating { animation-delay: 1s, 2.6s; }

  /* .reveal marks the scroll-in targets. Scroll-driven animation properties are left
     out because the W3C CSS validator does not accept them yet; a small script can
     animate these elements instead. */
}

/* ----------------------------------------------------------------
	Reduced Motion
---------------------------------------------------------------- */

/* Near-instant rather than none, so animationend and transitionend still fire. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}