/* ------------------------------------------------------------------ *
 * Ross Recruitment — additions layered on top of the Webflow export.
 *
 * Kept in one file so a future Webflow re-export only needs this stylesheet
 * and the /assets scripts re-linked, rather than changes hunted through the
 * generated markup.
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ *
 * LAYOUT SWITCH — how many columns the job results use
 *
 * Change --rr-jobs-columns to 1, 2 or 3 and save. That is the whole edit;
 * nothing else needs touching. It applies to /jobs and the specialisation
 * pages (the short list on the homepage stays one column either way,
 * because it sits in a narrow strip beside the contact form).
 *
 * This is the count on a wide desktop screen. Narrower screens step down
 * on their own — a column is never allowed to get thinner than
 * --rr-jobs-col-min, so e.g. 3 becomes 2 on a tablet and 1 on a phone.
 * Setting 1 means one column at every size.
 *
 * --rr-jobs-col-max is how wide a single card may get. Without it a
 * one-column list stretches the full 1080px of the container, which leaves
 * very wide, very short cards. Raise it for chunkier cards, lower it for
 * narrower ones. It only bites when a card would otherwise exceed it, so at
 * 2 or 3 columns it normally does nothing.
 * ------------------------------------------------------------------ */
:root {
  --rr-jobs-columns: 1;
  --rr-jobs-col-max: 720px; /* widest a card may get */
  --rr-jobs-col-min: 280px; /* narrowest a card may get before columns drop */
  --rr-jobs-gap: 1em; /* matches the gap in the Webflow stylesheet */
}

:root {
  --rr-green: #00776a;
  --rr-ink: #1a1a1a;
  --rr-muted: #6b7280;
  --rr-line: #e6e8eb;
  --rr-bg-soft: #f6f7f8;
  --rr-radius: 12px;
}

/* ---------- Jobs list: states + filter bar ---------- */

.jobs-message {
  grid-column: 1 / -1;
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--rr-muted);
  font-family: Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  background: var(--rr-bg-soft);
  border: 1px solid var(--rr-line);
  border-radius: var(--rr-radius);
}

.jobs-message a {
  color: var(--rr-green);
  text-decoration: underline;
}

/* Webflow centres this wrapper with auto inline margins and no width, which
   leaves it shrink-to-fit — its width comes from the max-content of the grid
   inside it. That makes the card cap below circular: cap the card at 720px and
   the wrapper shrinks to 720px too, so the grid only ever has room for one
   column no matter what the switch says. Giving the wrapper a real width
   breaks the loop. It lands at 1230px, matching the filter bar above it; the
   1080px it used to settle on was just whatever the widest card content
   happened to measure. This class is on the six listing pages only, always
   around the jobs list. */
.collection-list-wrapper2 {
  width: 100%;
}

/* Job results grid — driven by the --rr-jobs-columns switch at the top.
   Scoped to .collection-list-wrapper2, the full-width listing used on /jobs and
   the specialisation pages, so the narrow homepage list is left alone.

   Each track asks for whichever is larger: the card minimum, or an even share
   of the row for the requested column count. On a wide screen the even share
   wins and you get exactly that many columns; once the share would drop below
   the minimum, the minimum wins and auto-fill packs in fewer columns instead.
   That keeps the responsive behaviour honest at any setting — no breakpoint
   can contradict the switch by, say, forcing two columns when it is set to
   one. The gap is restated here so the share arithmetic and the real gap can
   never drift apart.

   Note the track max stays 1fr rather than --rr-jobs-col-max. auto-fill counts
   its repetitions off the max track sizing function whenever that is a
   definite length, so capping the track here would tell the grid that only one
   720px column can ever fit and collapse every setting to a single column. The
   width cap belongs on the card instead — see .collection-item below. */
.collection-list-wrapper2 [data-jobs-list].collection-list-2 {
  gap: var(--rr-jobs-gap);
  grid-template-columns: repeat(
    auto-fill,
    minmax(
      max(
        var(--rr-jobs-col-min),
        calc(
          (100% - (var(--rr-jobs-columns) - 1) * var(--rr-jobs-gap)) /
            var(--rr-jobs-columns)
        )
      ),
      1fr
    )
  );
  /* Webflow hard-codes ten explicit rows for the old static list; let rows be
     created on demand now that the count is driven by the live feed. */
  grid-template-rows: auto;
  align-items: stretch;
}

/* Webflow hard-codes ten explicit rows on .collection-list-2, sized for the ten
   static cards the export shipped with. The feed is dynamic now, so any unused
   rows collapse to 0px but their row-gaps survive: with three cards the list
   box ran 112px (seven gaps) past its last card. On the homepage the contact
   panel beside it stretches to the row, so it looked taller than the cards next
   to it. Applies to every list, not just the full-width ones. */
[data-jobs-list].collection-list-2 {
  grid-template-rows: auto;
}

/* Cards sit flush to the top of their row and push the buttons to the bottom,
   so a short description does not leave the Apply row floating mid-card. */
[data-jobs-list] .collection-item {
  align-content: start;
  height: 100%;
}

/* Card width cap. A one-column list would otherwise run the full width of the
   container, giving very wide, very short cards. Capping the card rather than
   the grid track keeps auto-fill's repetition maths working on 1fr.

   width: 100% is load-bearing. Auto inline margins on a grid item suppress
   stretch — the item drops to fit-content and the margins eat the slack — so
   centring the card that way made every card as wide as its own text: 720px
   where the teaser filled two lines, under 380px on a job whose teaser was
   missing entirely. An explicit width keeps every card the same size whatever
   it contains, max-width caps it, and justify-self centres it in a track wider
   than the cap. At 2 or 3 columns the track is narrower than the cap, so only
   the width applies. */
.collection-list-wrapper2 [data-jobs-list] .collection-item {
  width: 100%;
  max-width: var(--rr-jobs-col-max);
  justify-self: center;
}

/* Centre the card contents on the full-width listings.
   These cards sit inside a `center`-aligned wrapper on /jobs and the
   specialisation pages, so the teaser — which sets no alignment of its own —
   was inheriting centre while Webflow pinned .role-date and .role-desc to left
   and both .role-top flex rows to flex-start. The teaser ended up the only
   centred line on the card. Align everything else to it.

   Not applied to the homepage list, which sits in a left-aligned wrapper: the
   teaser inherits left there, so that card is already internally consistent
   and centring it would be a change nobody asked for. */
.collection-list-wrapper2 [data-jobs-list] .collection-item,
.collection-list-wrapper2 [data-jobs-list] .role-date,
.collection-list-wrapper2 [data-jobs-list] .role-desc {
  text-align: center;
}

/* Title/city and the Apply row are flex, so text-align does not reach them.
   align-items also covers the mobile breakpoint, where Webflow restacks this
   row as column-reverse with flex-start.

   width is what centres the Apply row. Webflow pins it with `justify-self:
   start` through a generated #w-node-… rule, and an id beats any selector
   built from classes, so justify-content alone left the row shrunk against the
   left edge. Filling the grid area sidesteps the specificity fight entirely —
   the row spans the card and centres its own buttons. */
.collection-list-wrapper2 [data-jobs-list] .role-top {
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Description teaser on a job card. Clamped to two lines, and given a two-line
   min-height so a short description still reserves the same space — otherwise
   cards sitting in the same row end up different heights. */
.role-excerpt {
  font-family: Roboto, sans-serif;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--rr-muted);
  margin-top: 0.5rem;
  min-height: calc(2 * 1.55em);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.jobs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin: 1.5rem 0 2rem;
}

.jobs-filters__field {
  position: relative;
  flex: 1 1 200px;
  min-width: 0;
}

.jobs-filters__input,
.jobs-filters__select {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: Roboto, sans-serif;
  font-size: 0.95rem;
  color: var(--rr-ink);
  background: #fff;
  border: 1px solid var(--rr-line);
  border-radius: var(--rr-radius);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.jobs-filters__select {
  /* Re-add a chevron, since appearance:none removes the native one. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.jobs-filters__input:focus,
.jobs-filters__select:focus {
  border-color: var(--rr-green);
  box-shadow: 0 0 0 3px rgba(0, 119, 106, 0.12);
}

.jobs-count {
  font-family: Roboto, sans-serif;
  font-size: 0.9rem;
  color: var(--rr-muted);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .jobs-filters__field { flex: 1 1 100%; }
}

/* ---------- Job detail page ---------- */

.job-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 1rem 0 2rem;
  font-family: Roboto, sans-serif;
  color: var(--rr-muted);
  font-size: 0.95rem;
}

.job-detail__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  background: var(--rr-bg-soft);
  border: 1px solid var(--rr-line);
  border-radius: 999px;
  color: var(--rr-ink);
}

.job-detail__body {
  font-family: Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: #333;
  max-width: 62ch;
}

/* Loxo pastes inline font/colour styles into descriptions. Neutralise them so
   job copy inherits the site's typography instead of Calibri on white. */
.job-detail__body [style] {
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
  background: transparent !important;
}

.job-detail__body p { margin: 0 0 1rem; }
.job-detail__body ul,
.job-detail__body ol { margin: 0 0 1rem 1.25rem; }
.job-detail__body li { margin-bottom: 0.5rem; }
.job-detail__body strong { color: var(--rr-ink); }

/* ---------- Sections added outside the Webflow build ---------- */

/* Every Webflow section carries `.section`, which is `position: relative;
   z-index: 2`, over an opaque background. That is what hides the decorative
   art the template scatters behind the page: the angled .bg-second / .bg-testi
   images sit at z-index -1 and .custom-bg-second is a sticky layer at z-index
   1. The sections rendered by sections.js are bare <section> elements with no
   background and no stacking context, so that artwork showed straight through
   them — the stray diagonal wedge behind the trust badges. Joining the same
   layer puts them back in the stack. */
.logo-bar,
.trust {
  position: relative;
  z-index: 2;
  background: #fff;
}

/* Rating + caption, sitting directly above the site's own scrolling logo strip
   so the three read as one block of social proof. They used to be two full
   Webflow sections further down the page; each carried 6.25em of section
   padding around a single line of content, which is where the large empty gap
   came from. Here they are just a small stack above the strip. */
.rr-social-proof {
  margin-bottom: 1.75rem;
}

.rr-social-proof .logo-bar__label {
  margin-top: 1.25rem;
  margin-bottom: 0;
}

/* The logo row sits inside the testimonial section, which already supplies the
   band's padding and background, so the standalone section chrome comes off. */
.rr-social-proof .logo-bar {
  padding: 0;
  background: none;
}

.rr-social-proof .logo-bar .logo-bar__label {
  margin-bottom: 1.5rem;
}

/* ---------- Client logo bar ---------- */

.logo-bar { padding: 3.5rem 0; }

.logo-bar__label {
  text-align: center;
  font-family: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rr-muted);
  margin-bottom: 2rem;
}

.logo-bar__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 2rem 2.5rem;
  align-items: center;
  justify-items: center;
}

.logo-bar__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
}

.logo-bar__item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* Greyscale keeps mismatched client logos looking like one row; colour on
     hover so the brands are still recognisable. */
  filter: grayscale(100%);
  opacity: 0.65;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

.logo-bar__item:hover img { filter: grayscale(0); opacity: 1; }

/* Placeholder shown until approved logo files are supplied. */
.logo-bar__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  padding: 0 1rem;
  font-family: inherit;
  font-size: 0.95rem;
  text-align: center;
  color: var(--rr-muted);
  background: var(--rr-bg-soft);
  border: 1px dashed var(--rr-line);
  border-radius: 8px;
}

/* ---------- Reviews / rating ---------- */

/* A quiet single line rather than a bordered widget. The card treatment — white
   panel, hairline border, drop shadow, 2.5rem serif score — read as an embedded
   third-party badge because nothing else on the site is built that way: the
   Webflow design has no shadows, and it sets Shoika on everything. Marcellus
   and Roboto are loaded by the page but the design never references them, so
   they only ever appeared on the sections added here. `inherit` keeps this in
   step with whatever the site's face is, including after a re-export. */
.reviews {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem 0.85rem;
  font-family: inherit;
}

/* Dissolve the stars/caption wrapper so its two children join the outer flex
   row directly, instead of stacking inside a box of their own. */
.reviews__body { display: contents; }

.reviews__score {
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--rr-ink);
}

.reviews__stars {
  display: inline-flex;
  gap: 2px;
  /* Nudged off the baseline so the stars centre on the score's x-height. */
  transform: translateY(2px);
}

.reviews__stars svg { width: 16px; height: 16px; }

/* Amber belongs to Google's badge, not to this palette. Presentation
   attributes lose to any stylesheet rule, so recolouring the gradient stops
   here overrides the fill written inline by sections.js — partial stars for a
   rating like 4.7 keep working. */
.reviews__stars stop:first-child { stop-color: var(--rr-green); }
.reviews__stars stop:last-child { stop-color: var(--rr-line); }

.reviews__meta {
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--rr-muted);
}

.reviews__meta a {
  color: var(--rr-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Free resources listing ----------
   Built to match the blog and services cards: a cover panel on top, a
   green-dot meta line, a Marcellus title, and an arrow CTA. Two cards only, so
   they are capped rather than stretched across the full container width. */

.resources {
  display: grid;
  /* min() is load-bearing: a bare minmax(320px, …) floor cannot shrink below
     320px, so on a narrow phone the tracks kept their width and pushed the
     whole page sideways. Clamping the floor to 100% lets a track collapse to
     the available width instead. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 2rem;
  width: 100%;
  max-width: 900px;
  margin: 3rem auto 0;
  text-align: left;
}

/* The card itself is the link now, so it has to shed the default anchor
   styling — otherwise the whole card turns link-blue and underlined. */
.resource {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--rr-line);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
  color: inherit;
  text-decoration: none;
}

a.resource { cursor: pointer; }

/* Keyboard users get the same visible target as the hover state. */
a.resource:focus-visible {
  outline: 2px solid var(--rr-green);
  outline-offset: 3px;
}

.resource:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 119, 106, 0.35);
  box-shadow: 0 18px 40px rgba(16, 24, 40, 0.12);
}

/* ---- cover ---- */

.resource__cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
  color: #fff;
  background: linear-gradient(135deg, #013a52 0%, #00776a 100%);
  overflow: hidden;
}

/* Soft diagonal sheen, so the panel is not a flat block of colour. */
.resource__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}

.resource__cover svg {
  width: 66px;
  height: auto;
  position: relative;
  z-index: 1;
  transition: transform 0.28s ease;
}

.resource:hover .resource__cover svg { transform: translateY(-3px) scale(1.04); }

.resource__format,
.resource__soon {
  position: absolute;
  top: 1rem;
  z-index: 2;
  font-family: Roboto, sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
}

.resource__format {
  left: 1rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.resource__soon {
  right: 1rem;
  color: #7c2d12;
  background: #ffedd5;
  border: 1px solid #fed7aa;
}

/* Not downloadable yet: desaturate the cover so it reads as inactive. */
.resource--off .resource__cover { filter: grayscale(0.55); opacity: 0.85; }
.resource--off:hover { transform: none; box-shadow: none; border-color: var(--rr-line); }
.resource--off:hover .resource__cover svg { transform: none; }

/* ---- content ---- */

.resource__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.6rem 1.75rem 1.75rem;
}

.resource__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: Roboto, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rr-muted);
  margin-bottom: 0.7rem;
}

/* The small green dot used beside labels throughout the site. */
.resource__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rr-green);
  flex: none;
}

.resource__title {
  font-family: Marcellus, serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--rr-ink);
  margin: 0 0 0.65rem;
}

.resource__desc {
  font-family: Roboto, sans-serif;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--rr-muted);
  margin: 0 0 1.5rem;
  flex: 1; /* keeps the CTA on the baseline across cards */
}

.resource__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
}

.resource__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: Roboto, sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--rr-green);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.resource__arrow { transition: transform 0.22s ease; }
.resource__cta:hover .resource__arrow { transform: translate(2px, -2px); }

.resource__cta--off {
  color: var(--rr-muted);
  cursor: default;
}

.resource__read {
  font-family: Roboto, sans-serif;
  font-size: 0.92rem;
  color: var(--rr-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--rr-line);
  padding-bottom: 1px;
}

.resource__read:hover { color: var(--rr-ink); border-bottom-color: var(--rr-ink); }

/* ---- inline email form ---- */

.resource__panel {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rr-line);
}

.resource__panel[hidden] { display: none; }

.resource__panel .gate__label {
  display: block;
  margin: 0 0 0.3rem;
  font-family: Roboto, sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--rr-ink);
}

.resource__panel .gate__input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.9rem;
  font-family: Roboto, sans-serif;
  font-size: 0.92rem;
  border: 1px solid var(--rr-line);
  border-radius: 10px;
  outline: none;
  background: var(--rr-bg-soft);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.resource__panel .gate__input:focus {
  background: #fff;
  border-color: var(--rr-green);
  box-shadow: 0 0 0 3px rgba(0, 119, 106, 0.12);
}

.resource__panel .gate__consent {
  font-family: Roboto, sans-serif;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--rr-muted);
  margin: 0.25rem 0 1.1rem;
}

.resource__panel .gate__error {
  font-family: Roboto, sans-serif;
  font-size: 0.85rem;
  color: #b42318;
  margin-bottom: 0.75rem;
}

.gate__req { color: #b42318; }

.gate__note {
  font-family: Roboto, sans-serif;
  font-size: 0.8rem;
  color: var(--rr-muted);
  margin-top: 0.5rem;
}

@media (max-width: 767px) {
  .resources { gap: 1.5rem; margin-top: 2rem; }
  .resource__cover { height: 150px; }
  .resource__content { padding: 1.35rem 1.35rem 1.5rem; }
  .resource__title { font-size: 1.4rem; }
}

/* ---------- Trust badges ---------- */

.trust {
  padding: 3rem 0;
  border-top: 1px solid var(--rr-line);
}

/* No cards: the grey boxes made three short facts look like a form. Thin rules
   between the columns and a lot of air do the same job of separating them
   without adding weight. */
.trust__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
}

.trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 0.5rem 2rem;
  border-left: 1px solid var(--rr-line);
}

.trust__item:first-child {
  border-left: 0;
}

.trust__value {
  font-family: inherit;
  font-size: 3.25rem;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--rr-green);
}

/* Icon sits above the figure, same green, sized to the label rather than the
   number so it supports the fact instead of competing with it. */
.trust__icon {
  display: block;
  width: 26px;
  height: 26px;
  margin-bottom: 0.65rem;
  color: var(--rr-green);
}

.trust__label {
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--rr-muted);
  line-height: 1.5;
  max-width: 22ch;
}

/* Stacked on a phone, the left rule becomes a stray vertical line down the side
   of each block, so it moves to the top edge instead. Forced to one column
   because two 188px columns would fit but leave labels like
   "States covered: NSW, VIC, QLD & WA" badly cramped. */
@media (max-width: 700px) {
  .trust__grid {
    grid-template-columns: 1fr;
  }

  .trust__item {
    border-left: 0;
    padding: 1.25rem 1rem;
  }

  .trust__item + .trust__item {
    border-top: 1px solid var(--rr-line);
  }

  .trust__value {
    font-size: 2.5rem;
  }
}

/* Service pages: the "More Services" sidebar was starting ~390px down the page.
   Webflow gives .column-padding `margin-top: auto`, which is inert in the float
   grid it was written for — but .service-details is display:flex, and in a flex
   row an auto top margin eats all the free space to push the item to the
   bottom. The sidebar is much shorter than the article beside it, so every one
   of that difference landed above it as blank space. Top-align it instead.
   Scoped to this row: .column-padding is on ~120 pages, and the other layouts
   using it are Webflow's non-flex .w-row, where the auto margin does nothing. */
.service-details .column-padding {
  margin-top: 0;
}

/* The CTA heading sits on a dark panel and must stay white. Two things fight
   it on the salary guide: Webflow's own `.section-title-copy.fw-reg` is
   #1a1a1a, and the pasted salary document ships an unscoped
   `.section-title { color: #002E72 }` that leaks out of the embed and beats
   Webflow's white rule on source order. Two classes outrank both, so this
   holds either way. On other pages the heading is already white and this
   changes nothing. */
.wrap-cta .section-title,
.wrap-cta .section-title-copy {
  color: #fff;
}

/* Intro paragraph under a centred section heading. The markup caps it with a
   max-width so it does not run the full container width, but without auto
   inline margins the shortened box stays pinned to the left edge — the text
   inside is centred, the block itself is not, which reads as slightly off. */
.heading-subtitle.center .section-subtitle {
  margin-inline: auto;
}

/* ---------- Specialisation landing pages ----------
   Short pages that sell the specialism, rather than the endless job board they
   used to be. Base layout only — the design variants live in the temporary
   switcher script while an option is being chosen. */

.spec {
  padding: 4.5rem 0 5rem;
  position: relative;
  z-index: 2;
  background: #fff;
}

/* Editorial treatment: wider measure, the lede set in body ink rather than grey
   so it reads as copy rather than a caption. */
.spec__intro {
  max-width: 70ch;
  margin: 0 auto 4rem;
  text-align: center;
}

.spec__lede {
  margin: 1rem 0 0;
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--rr-ink);
}

/* Second block: a short statement set across two columns, heading left and
   copy right. Deliberately much shorter than the intro above it — no label
   pill, no buttons, no repeated headline — so it reads as a follow-on rather
   than a second opening. */
.spec__intro--split {
  max-width: none;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 0 3rem;
  align-items: start;
  margin-bottom: 3.5rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--rr-line);
}

.spec__split-h {
  margin: 0;
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.spec__intro--split .spec__lede {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--rr-muted);
}

@media (max-width: 860px) {
  .spec__intro--split {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
  }

  .spec__split-h { font-size: 1.35rem; }
}

.spec__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}

/* Editorial: blocks separated by a rule rather than boxed, headings reduced to
   quiet uppercase labels so the content carries the page. */
.spec__block {
  margin-bottom: 3.5rem;
  border-top: 1px solid var(--rr-line);
  padding-top: 2.25rem;
}

.spec__block-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.spec__h {
  margin: 0 0 1.5rem;
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--rr-muted);
}

.spec__block-head .spec__h { margin-bottom: 0; flex: 1; }

.spec__all {
  color: var(--rr-green);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 0.92rem;
  white-space: nowrap;
}

/* Roles: a scannable list of what we actually place, with indicative money. */
.spec__roles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 2.5rem;
}

.spec__role {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rr-line);
}

.spec__role-name { flex: 1; }

.spec__role-band {
  color: var(--rr-green);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.spec__note {
  margin-top: 1.25rem;
  font-size: 0.88rem;
  color: var(--rr-muted);
}

.spec__note a { color: var(--rr-green); text-decoration: underline; }

.spec__points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}

.spec__point p {
  margin: 0.5rem 0 0;
  color: var(--rr-muted);
  line-height: 1.65;
}

.spec__point-h { font-size: 1.15rem; font-weight: 400; }

@media (max-width: 700px) {
  .spec { padding: 3rem 0; }
  .spec__intro { margin-bottom: 2.5rem; }
  .spec__lede { font-size: 1.05rem; }
}

/* Second copy of the site's scrolling logo strip, sitting directly under the
   hero. The Webflow interaction ids were stripped from the clone so the
   animation engine is not handed two elements claiming the same id. */
.rr-hero-logos {
  position: relative;
  z-index: 2;
  background: #fff;
  padding: 2.5rem 0;
}

/* ---------- Gated resource dialog ----------
   Shown when a card marked "require details" is clicked. The destination is
   never in the markup — the server returns it only after the form is posted —
   so the file cannot be lifted straight out of an href. */

.resource-gate {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(16, 24, 40, 0.55);
  backdrop-filter: blur(3px);
}

.resource-gate[hidden] { display: none; }

.resource-gate__panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2rem;
  background: #fff;
  border-radius: var(--rr-radius);
  box-shadow: 0 18px 50px rgba(16, 24, 40, 0.25);
}

.resource-gate__close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  border: 0;
  background: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--rr-muted);
  cursor: pointer;
}

.resource-gate__title {
  margin: 0 0 0.35rem;
  font-family: inherit;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}

.resource-gate__intro {
  margin: 0 0 1.25rem;
  font-size: 0.92rem;
  color: var(--rr-muted);
}

.resource-gate__error {
  margin-top: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  background: #fdf3f2;
  border: 1px solid #f0c8c4;
  color: #b42318;
  font-size: 0.87rem;
}

.resource-gate__submit { margin-top: 1rem; width: 100%; }

/* A gated card is a <button>, so it needs the browser's button chrome removed
   to match the <a> cards beside it. */
button.resource {
  border: 1px solid var(--rr-line);
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  padding: 0;
}

/* ---------- Salary guide ----------
   The guide is a self-contained document pasted into a Webflow embed, and the
   page carries two copies of it (a desktop one and a .cssmob clone), so its own
   <style> block would have to be edited twice and kept in sync. Refining it
   from here instead keeps the change in one place. Colours were already on
   brand; what dated it was the gradients, the 15px radii and the loose rows. */

.salary-note {
  max-width: 70ch;
  margin: -1rem 0 2rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--rr-muted);
}

/* Flat surfaces instead of gradient panels, matching the cards elsewhere. */
.insight-card {
  background: var(--rr-bg-soft) !important;
  border: 1px solid var(--rr-line) !important;
  border-radius: var(--rr-radius) !important;
  transition: border-color 0.2s ease !important;
}

.insight-card:hover { border-color: var(--rr-green) !important; }

.highlight-box {
  border-radius: var(--rr-radius) !important;
}

.category-header {
  border-radius: var(--rr-radius) var(--rr-radius) 0 0 !important;
  letter-spacing: -0.01em;
}

/* Zebra striping does more for scanning a long salary table than the row
   borders did, and the tabular figures stop the columns jittering. */
.salary-item:nth-child(odd) { background: #fbfcfc; }
.salary-item:hover { background: var(--rr-bg-soft); }

.salary-amount {
  font-variant-numeric: tabular-nums;
  font-size: 1rem !important;
}

.stat-number {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* The placement times are Ross's claims, not market data — keeping them
   visually quieter than the salaries stops the two reading as equal evidence. */
.placement-time {
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem !important;
}

/* ---------- Team grid ---------- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}

.team-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--rr-line);
  border-radius: var(--rr-radius);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.1);
}

.team-card__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--rr-bg-soft);
}

.team-card__body { padding: 1.25rem; }

.team-card__name {
  font-family: Marcellus, serif;
  font-size: 1.25rem;
  color: var(--rr-ink);
  margin-bottom: 0.15rem;
}

.team-card__role {
  font-family: Roboto, sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rr-green);
  margin-bottom: 0.75rem;
}

.team-card__bio {
  font-family: Roboto, sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--rr-muted);
}

.team-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1rem;
}

.team-card__tag {
  padding: 0.25rem 0.7rem;
  font-family: Roboto, sans-serif;
  font-size: 0.75rem;
  color: var(--rr-ink);
  background: var(--rr-bg-soft);
  border-radius: 999px;
}

/* ---------- Gated download form ---------- */

.gate {
  max-width: 480px;
  padding: 2rem;
  background: #fff;
  border: 1px solid var(--rr-line);
  border-radius: var(--rr-radius);
  box-shadow: 0 4px 20px rgba(16, 24, 40, 0.06);
}

.gate__field { margin-bottom: 1rem; }

.gate__label {
  display: block;
  margin-bottom: 0.35rem;
  font-family: Roboto, sans-serif;
  font-size: 0.85rem;
  color: var(--rr-ink);
}

.gate__input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: Roboto, sans-serif;
  font-size: 0.95rem;
  border: 1px solid var(--rr-line);
  border-radius: var(--rr-radius);
  outline: none;
}

.gate__input:focus {
  border-color: var(--rr-green);
  box-shadow: 0 0 0 3px rgba(0, 119, 106, 0.12);
}

.gate__consent {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-family: Roboto, sans-serif;
  font-size: 0.8rem;
  color: var(--rr-muted);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.gate__error {
  font-family: Roboto, sans-serif;
  font-size: 0.85rem;
  color: #b42318;
  margin-bottom: 0.75rem;
}

/* Honeypot: hidden from people, visible to bots that fill every field. */
.gate__hp {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
}