@charset "UTF-8";
/* ==========================================================================
   Class Recruitment — Portal CSS
   --------------------------------------------------------------------------
   Portal-level styles. Loaded after the skin's stylesheet, so anything here
   overrides skin defaults. Two things live in this file:

     1. Page-specific styles for the bespoke content pages
        (Home, Client, Candidate, Contact, Team).
     2. Brand overrides for third-party module CSS the skin didn't cover
        (currently News and Reviews).

   Design tokens (colour, type, spacing) come from the skin — this file
   references them via CSS variables so anything defined once stays in sync.
   ========================================================================== */


/* ==========================================================================
   NEW COMPONENT STYLES (moved from skin.css)
   --------------------------------------------------------------------------
   Skin.css delivery has proved unreliable — DNN's caching and CSS load
   order is enough of a wildcard that anything new needs to sit here instead
   to guarantee it applies. Portal.css always wins the cascade.
   ========================================================================== */

/* Italic accent word inside a hero title, with hand-drawn squiggle underline.
   The parent .class-hero__title uses -webkit-text-fill-color: transparent for
   its gradient text effect, which the accent span inherits — so we have to
   explicitly force the accent to render with a solid brand-purple-light fill
   or it disappears. */
.class-hero__title-accent {
  display: inline-block;
  position: relative;
  font-style: italic;
  font-weight: 500;
  color: #ba68c8;
  -webkit-text-fill-color: #ba68c8;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
}
.class-hero__title-squiggle {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.14em;
  width: 100%;
  height: 0.24em;
  color: #ba68c8;
  overflow: visible;
}

/* Home hero body — centre the whole content column so it sits balanced
   over the photo background. */
.home-hero .class-hero__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.home-hero .class-hero__lead { margin-left: auto; margin-right: auto; }
.home-hero .class-hero__search { margin-left: auto; margin-right: auto; }
.home-hero .class-hero__ctas { justify-content: center; }

/* More breathing room between the two hero CTAs */
.class-hero__ctas { gap: 20px; }
.home-hero .class-hero__ctas { gap: 20px; }

/* Photo-as-background hero with brand-purple gradient overlay.
   Three layers stacked: (1) purple gradient overlay for text contrast +
   brand recognition, (2) the photograph itself, (3) a solid brand gradient
   fallback that shows through if the photo doesn't load. */
.home-hero.class-hero {
  background:
    linear-gradient(135deg,
      rgba(26, 13, 43, 0.88) 0%,
      rgba(74, 14, 105, 0.72) 45%,
      rgba(123, 31, 162, 0.55) 100%
    ),
    url('/Portals/0/Images/home-hero.jpg') center center / cover no-repeat,
    linear-gradient(135deg, #1a0d2b 0%, #4a0e69 45%, #7b1fa2 100%);
}

/* Hide the separate figure image — photo is now the hero background */
.home-hero .class-hero__figure { display: none; }

/* Single-column centred layout since the image column is gone.
   Higher specificity (0,3,0) beats the .class-hero--split rule (0,2,0)
   even inside its media query. */
.home-hero.class-hero--split .class-hero__inner,
.home-hero .class-hero__inner {
  grid-template-columns: 1fr;
  max-width: 900px;
  margin-inline: auto;
}

/* Sr-only label hide inside hero search (label was reappearing) */
.class-hero__search label,
.home-hero__search label,
.class-hero__search > label,
.home-hero__search > label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  font-size: 0;
  line-height: 0;
}

/* Accreditations / trust strip */
.class-accred {
  padding: 32px 0;
  border-bottom: 1px solid var(--c-line);
  text-align: center;
}
.class-accred__eyebrow,
.class-accred > p {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-ink-subtle);
  text-align: center;
  margin: 0 0 16px;
}
.class-accred__grid,
.class-accred ul,
.class-accred > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px 32px;
}
.class-accred__item,
.class-accred li {
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  list-style: none;
}
.class-accred__logo,
.class-accred img {
  height: 48px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  filter: grayscale(0.4) opacity(0.85);
  transition: filter 220ms cubic-bezier(0.4, 0, 0.2, 1), transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.class-accred__item:hover .class-accred__logo,
.class-accred li:hover img {
  filter: grayscale(0) opacity(1);
  transform: translateY(-1px);
}
@media (max-width: 720px) {
  .class-accred__logo,
  .class-accred img { height: 40px; }
  .class-accred__grid,
  .class-accred ul { gap: 16px; }
}

/* Scroll cue */
.class-scrollcue {
  padding: 32px 0;
  text-align: center;
}
.class-scrollcue__link,
.class-scrollcue > a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--c-purple-deep);
  text-decoration: none;
  padding: 12px 16px;
  transition: color 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.class-scrollcue__link:hover,
.class-scrollcue > a:hover {
  color: var(--c-purple);
  text-decoration: none;
}
.class-scrollcue__label,
.class-scrollcue a > span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.01em;
  border-bottom: 2px solid currentColor;
  padding-bottom: 4px;
}
.class-scrollcue__arrow,
.class-scrollcue svg {
  width: 56px !important;
  height: 72px !important;
  display: inline-block;
  animation: classScrollBob 2.4s ease-in-out infinite;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.class-scrollcue__link:hover .class-scrollcue__arrow { transform: translateY(4px); }
@keyframes classScrollBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .class-scrollcue__arrow, .class-scrollcue svg { animation: none; }
}

/* Team strip */
.class-team-strip {
  padding: 64px 24px;
  background: var(--c-bg-soft);
  border-radius: 28px;
  margin: 32px 0;
}
.class-team-strip__head {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}
.class-team-strip__head h2 {
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.025em;
  margin: 8px 0 12px;
}
.class-team-strip__head .lead { color: var(--c-ink-muted); margin: 0; }

.class-team-strip__grid,
.class-team-strip > ul {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 900px) {
  .class-team-strip__grid,
  .class-team-strip > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .class-team-strip__grid,
  .class-team-strip > ul { grid-template-columns: 1fr; }
}
.class-team__item,
.class-team-strip li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 20px;
  text-align: center;
  transition: all 220ms cubic-bezier(0.4, 0, 0.2, 1);
  list-style: none;
  margin: 0;
}
.class-team__item:hover,
.class-team-strip li:hover {
  border-color: var(--c-purple-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(123, 31, 162, 0.08);
}
.class-team__photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 12px;
  background: linear-gradient(135deg, var(--c-purple-light), var(--c-purple-deep));
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(31, 21, 48, 0.08);
}
.class-team__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--c-ink-strong);
}
.class-team__role {
  font-size: 14px;
  color: var(--c-ink-muted);
  margin-bottom: 8px;
}
.class-team__dial {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--c-purple-deep);
  text-decoration: none;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--c-purple-tint);
  transition: background 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.class-team__dial:hover {
  background: var(--c-purple-light);
  color: #fff;
  text-decoration: none;
}
.class-team-strip__foot { text-align: center; }

/* Floating action button */
.class-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 420ms cubic-bezier(0.16, 1, 0.3, 1), transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.class-fab.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.class-fab.is-dismissed { display: none; }
.class-fab__bubble {
  background: #fff;
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: 0 6px 24px rgba(31, 21, 48, 0.15), 0 2px 6px rgba(31, 21, 48, 0.06);
  font-size: 14px;
  color: var(--c-ink-strong);
  max-width: 240px;
  line-height: 1.4;
  margin-bottom: 6px;
  position: relative;
}
.class-fab__bubble::after {
  content: "";
  position: absolute;
  bottom: 12px;
  right: -6px;
  width: 12px;
  height: 12px;
  background: #fff;
  transform: rotate(45deg);
}
.class-fab__hello { font-family: var(--font-display); font-weight: 500; }
.class-fab__cta {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7b1fa2 0%, #4a0e69 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(123, 31, 162, 0.35), 0 4px 12px rgba(31, 21, 48, 0.15);
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
.class-fab__cta:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 14px 40px rgba(123, 31, 162, 0.45), 0 6px 16px rgba(31, 21, 48, 0.2);
  color: #fff;
  text-decoration: none;
}
@media (max-width: 720px) {
  .class-fab { bottom: 16px; right: 16px; }
  .class-fab__bubble { display: none; }
  .class-fab__cta { width: 52px; height: 52px; }
}


/* ==========================================================================
   INTERACTIVE ELEMENT OVERRIDES
   --------------------------------------------------------------------------
   Portal.css loads last (via Page_Init HtmlLink in _includes.ascx), so these
   rules definitively win over any DNN Common / Bootstrap / module CSS. Keep
   these tight — only the properties that need to hold. Anything cosmetic
   (transitions, hover polish) stays in skin.css.
   ========================================================================== */

/* Header action CTAs (<a> elements) — DNN can style aggressively */
.class-header__ctas .class-header__cta {
  text-decoration: none;
  border: 1.5px solid transparent;
  font-family: var(--font-display);
}
.class-header__ctas .class-header__cta--primary {
  background: var(--c-purple-deep);
  color: #fff;
}
.class-header__ctas .class-header__cta--primary:hover {
  background: var(--c-purple);
  color: #fff;
  text-decoration: none;
}
.class-header__ctas .class-header__cta--secondary {
  background: transparent;
  color: var(--c-purple-deep);
  border-color: var(--c-line-strong);
}
.class-header__ctas .class-header__cta--secondary:hover {
  background: var(--c-purple-mist);
  color: var(--c-purple-deep);
  text-decoration: none;
}

/* Scroll cue link */
.class-scrollcue .class-scrollcue__link {
  color: var(--c-purple-deep);
  text-decoration: none;
}
.class-scrollcue .class-scrollcue__link:hover {
  color: var(--c-purple);
  text-decoration: none;
}

/* Team member dial pills — vulnerable to generic <a> rules */
.class-team-strip .class-team__dial {
  background: var(--c-purple-tint);
  color: var(--c-purple-deep);
  text-decoration: none;
  font-family: var(--font-display);
}
.class-team-strip .class-team__dial:hover {
  background: var(--c-purple-light);
  color: #fff;
  text-decoration: none;
}

/* Meet-the-whole-team ghost button */
.class-team-strip__foot .class-btn.class-btn--ghost {
  background: transparent;
  color: var(--c-purple-deep);
  border: 1.5px solid var(--c-line-strong);
  text-decoration: none;
}
.class-team-strip__foot .class-btn.class-btn--ghost:hover {
  background: var(--c-purple-mist);
  border-color: var(--c-purple-light);
  color: var(--c-purple-deep);
  text-decoration: none;
}

/* Floating action button — the <button> is the biggest risk here, same
   lesson as the hero search button. Belt-and-braces overrides so DNN's
   default button styling can't sneak through. */
.class-fab button.class-fab__dismiss,
.class-fab > button {
  background: #fff !important;
  border: 1px solid var(--c-line) !important;
  color: var(--c-ink-muted) !important;
  padding: 0 !important;
  border-radius: 50% !important;
  width: 24px !important;
  height: 24px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  font-family: inherit !important;
  font-weight: normal !important;
}
.class-fab button.class-fab__dismiss:hover,
.class-fab > button:hover {
  background: #fff !important;
  border-color: var(--c-purple-light) !important;
  color: var(--c-purple-deep) !important;
}
.class-fab .class-fab__cta {
  background: linear-gradient(135deg, #7b1fa2 0%, #4a0e69 100%);
  color: #fff;
  text-decoration: none;
  border: 0;
}
.class-fab .class-fab__cta:hover {
  color: #fff;
  text-decoration: none;
}


/* ==========================================================================
   COMPACT HERO — for module-heavy pages (Jobs, FAQ, News, Registration)
   Same brand gradient as the main-page heroes but with reduced vertical
   padding so the functional module below reaches the fold faster.
   No photo background — content pages get the fuller treatment; module
   pages stay lean and functional.
   ========================================================================== */

.class-hero--compact {
  padding: 56px 0 48px !important;
  background:
    radial-gradient(700px 400px at 80% 10%, rgba(186, 104, 200, 0.25), transparent 60%),
    radial-gradient(600px 400px at 10% 90%, rgba(123, 31, 162, 0.35), transparent 60%),
    linear-gradient(135deg, #1a0d2b 0%, #4a0e69 45%, #7b1fa2 100%) !important;
}
.class-hero--compact .class-hero__inner {
  grid-template-columns: 1fr !important;
  max-width: 900px !important;
  margin-inline: auto !important;
}
.class-hero--compact .class-hero__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.class-hero--compact .class-hero__title {
  font-size: clamp(32px, 4vw, 56px) !important;
  margin: 0 0 16px !important;
}
.class-hero--compact .class-hero__lead {
  margin: 0 auto !important;
  max-width: 52ch;
  font-size: 18px;
}
.class-hero--compact .class-hero__figure { display: none; }
@media (max-width: 720px) {
  .class-hero--compact { padding: 40px 0 32px !important; }
}

/* Photo backgrounds for the four compact banners. Same three-layer overlay
   as the main-content-page heroes: (1) purple gradient overlay for text
   contrast + brand recognition, (2) the photograph, (3) fallback gradient
   underneath in case the photo fails to load. */
.jobs-hero.class-hero--compact {
  background:
    linear-gradient(135deg,
      rgba(26, 13, 43, 0.85) 0%,
      rgba(74, 14, 105, 0.72) 45%,
      rgba(123, 31, 162, 0.55) 100%
    ),
    url('/Portals/0/Images/jobs/jobs-hero.jpg') center center / cover no-repeat,
    linear-gradient(135deg, #1a0d2b 0%, #4a0e69 45%, #7b1fa2 100%) !important;
}
.faq-hero.class-hero--compact {
  background:
    linear-gradient(135deg,
      rgba(26, 13, 43, 0.85) 0%,
      rgba(74, 14, 105, 0.72) 45%,
      rgba(123, 31, 162, 0.55) 100%
    ),
    url('/Portals/0/Images/faq/faq-hero.jpg') center center / cover no-repeat,
    linear-gradient(135deg, #1a0d2b 0%, #4a0e69 45%, #7b1fa2 100%) !important;
}
.news-hero.class-hero--compact {
  background:
    linear-gradient(135deg,
      rgba(26, 13, 43, 0.85) 0%,
      rgba(74, 14, 105, 0.72) 45%,
      rgba(123, 31, 162, 0.55) 100%
    ),
    url('/Portals/0/Images/news/news-hero.jpg') center center / cover no-repeat,
    linear-gradient(135deg, #1a0d2b 0%, #4a0e69 45%, #7b1fa2 100%) !important;
}
.registration-hero.class-hero--compact {
  background:
    linear-gradient(135deg,
      rgba(26, 13, 43, 0.85) 0%,
      rgba(74, 14, 105, 0.72) 45%,
      rgba(123, 31, 162, 0.55) 100%
    ),
    url('/Portals/0/Images/registration/registration-hero.jpg') center center / cover no-repeat,
    linear-gradient(135deg, #1a0d2b 0%, #4a0e69 45%, #7b1fa2 100%) !important;
}

/* ==========================================================================
   FIX 1 — Jobs, FAQ, News, Registration heroes match content-page depth
   --------------------------------------------------------------------------
   Overrides the .class-hero--compact padding for these four pages so they
   feel the same weight as Home / Client / Candidate / Contact / Team.
   Registration was originally left compact ("form's already long") but the
   short banner reads as inconsistent once the page identity system is in
   play — it now matches the rest so every non-home page carries the same
   banner weight.
   ========================================================================== */
.jobs-hero.class-hero--compact,
.faq-hero.class-hero--compact,
.news-hero.class-hero--compact,
.registration-hero.class-hero--compact {
  padding: 96px 0 64px !important;
}
@media (max-width: 720px) {
  .jobs-hero.class-hero--compact,
  .faq-hero.class-hero--compact,
  .news-hero.class-hero--compact,
  .registration-hero.class-hero--compact {
    padding: 56px 0 40px !important;
  }
}


/* ==========================================================================
   CONSISTENT BANNER HEIGHT — 8 pages
   --------------------------------------------------------------------------
   Jobs / FAQ / News / Registration / Candidate / Client / Team all set to
   the same min-height as Contact, so no matter how much content each hero
   contains, the visual weight of the banner is consistent across the site.

   Home is deliberately left independent — its embedded search field and
   dual CTAs make it naturally taller, which fits its status as the entry
   point to the site.

   Content is vertical-centred within the min-height so short-content pages
   don't look empty and long-content pages just push the min-height taller.
   ========================================================================== */
.jobs-hero.class-hero--compact,
.faq-hero.class-hero--compact,
.news-hero.class-hero--compact,
.registration-hero.class-hero--compact,
.candidate-hero.class-hero,
.client-hero.class-hero,
.team-hero.class-hero,
.contact-hero.class-hero {
  min-height: 520px;
  display: flex;
  align-items: center;
}

@media (max-width: 900px) {
  .jobs-hero.class-hero--compact,
  .faq-hero.class-hero--compact,
  .news-hero.class-hero--compact,
  .registration-hero.class-hero--compact,
  .candidate-hero.class-hero,
  .client-hero.class-hero,
  .team-hero.class-hero,
  .contact-hero.class-hero {
    min-height: 440px;
  }
}
@media (max-width: 720px) {
  .jobs-hero.class-hero--compact,
  .faq-hero.class-hero--compact,
  .news-hero.class-hero--compact,
  .registration-hero.class-hero--compact,
  .candidate-hero.class-hero,
  .client-hero.class-hero,
  .team-hero.class-hero,
  .contact-hero.class-hero {
    min-height: 380px;
  }
}

/* The .class-hero__inner needs to be a proper flex child taking full width
   so the container's max-width and centring still work correctly inside the
   now-flexbox parent. */
.jobs-hero.class-hero--compact .class-hero__inner,
.faq-hero.class-hero--compact .class-hero__inner,
.news-hero.class-hero--compact .class-hero__inner,
.registration-hero.class-hero--compact .class-hero__inner,
.candidate-hero.class-hero .class-hero__inner,
.client-hero.class-hero .class-hero__inner,
.team-hero.class-hero .class-hero__inner,
.contact-hero.class-hero .class-hero__inner {
  width: 100%;
  flex: 1 1 auto;
}


/* ==========================================================================
   FIX 2 — Reduce purple overlay opacity below 900px
   --------------------------------------------------------------------------
   On smaller screens the photo takes up less visual real estate, so a heavy
   purple overlay drowns it out. Dropping the top-layer opacity from 88/72/55
   to 55/42/28 lets the photo breathe on mobile while keeping enough overlay
   for text contrast.
   ========================================================================== */
@media (max-width: 900px) {
  .home-hero.class-hero {
    background:
      linear-gradient(135deg,
        rgba(26, 13, 43, 0.55) 0%,
        rgba(74, 14, 105, 0.42) 45%,
        rgba(123, 31, 162, 0.28) 100%
      ),
      url('/Portals/0/Images/home-hero.jpg') center center / cover no-repeat,
      linear-gradient(135deg, #1a0d2b 0%, #4a0e69 45%, #7b1fa2 100%);
  }
  .client-hero.class-hero {
    background:
      linear-gradient(135deg,
        rgba(26, 13, 43, 0.55) 0%,
        rgba(74, 14, 105, 0.42) 45%,
        rgba(123, 31, 162, 0.28) 100%
      ),
      url('/Portals/0/Images/client/client-hero.jpg') center center / cover no-repeat,
      linear-gradient(135deg, #1a0d2b 0%, #4a0e69 45%, #7b1fa2 100%);
  }
  .candidate-hero.class-hero {
    background:
      linear-gradient(135deg,
        rgba(26, 13, 43, 0.55) 0%,
        rgba(74, 14, 105, 0.42) 45%,
        rgba(123, 31, 162, 0.28) 100%
      ),
      url('/Portals/0/Images/candidate/candidate-hero.jpg') center center / cover no-repeat,
      linear-gradient(135deg, #1a0d2b 0%, #4a0e69 45%, #7b1fa2 100%);
  }
  .contact-hero.class-hero {
    background:
      linear-gradient(135deg,
        rgba(26, 13, 43, 0.55) 0%,
        rgba(74, 14, 105, 0.42) 45%,
        rgba(123, 31, 162, 0.28) 100%
      ),
      url('/Portals/0/Images/contact/contact-hero.jpg') center center / cover no-repeat,
      linear-gradient(135deg, #1a0d2b 0%, #4a0e69 45%, #7b1fa2 100%);
  }
  .team-hero.class-hero {
    background:
      linear-gradient(135deg,
        rgba(26, 13, 43, 0.55) 0%,
        rgba(74, 14, 105, 0.42) 45%,
        rgba(123, 31, 162, 0.28) 100%
      ),
      url('/Portals/0/Images/team/team-hero.jpg') center center / cover no-repeat,
      linear-gradient(135deg, #1a0d2b 0%, #4a0e69 45%, #7b1fa2 100%);
  }
  .jobs-hero.class-hero--compact {
    background:
      linear-gradient(135deg,
        rgba(26, 13, 43, 0.55) 0%,
        rgba(74, 14, 105, 0.42) 45%,
        rgba(123, 31, 162, 0.28) 100%
      ),
      url('/Portals/0/Images/jobs/jobs-hero.jpg') center center / cover no-repeat,
      linear-gradient(135deg, #1a0d2b 0%, #4a0e69 45%, #7b1fa2 100%) !important;
  }
  .faq-hero.class-hero--compact {
    background:
      linear-gradient(135deg,
        rgba(26, 13, 43, 0.55) 0%,
        rgba(74, 14, 105, 0.42) 45%,
        rgba(123, 31, 162, 0.28) 100%
      ),
      url('/Portals/0/Images/faq/faq-hero.jpg') center center / cover no-repeat,
      linear-gradient(135deg, #1a0d2b 0%, #4a0e69 45%, #7b1fa2 100%) !important;
  }
  .news-hero.class-hero--compact {
    background:
      linear-gradient(135deg,
        rgba(26, 13, 43, 0.55) 0%,
        rgba(74, 14, 105, 0.42) 45%,
        rgba(123, 31, 162, 0.28) 100%
      ),
      url('/Portals/0/Images/news/news-hero.jpg') center center / cover no-repeat,
      linear-gradient(135deg, #1a0d2b 0%, #4a0e69 45%, #7b1fa2 100%) !important;
  }
  .registration-hero.class-hero--compact {
    background:
      linear-gradient(135deg,
        rgba(26, 13, 43, 0.55) 0%,
        rgba(74, 14, 105, 0.42) 45%,
        rgba(123, 31, 162, 0.28) 100%
      ),
      url('/Portals/0/Images/registration/registration-hero.jpg') center center / cover no-repeat,
      linear-gradient(135deg, #1a0d2b 0%, #4a0e69 45%, #7b1fa2 100%) !important;
  }
}


/* ==========================================================================
   FIX 3 — Stack multi-column grids on mobile
   --------------------------------------------------------------------------
   Every "Why Class" style section (and the roles / services / journey / team
   grids that share the same 3- or 4-column pattern) uses inline styles for
   grid-template-columns. Inline styles beat class-based media queries — so
   these overrides need !important to force stacking on mobile.

   Applied at max-width: 900px so the switch to a single column happens as
   soon as the columns start feeling cramped.
   ========================================================================== */
@media (max-width: 900px) {
  .home-why__grid,
  .client-services__grid,
  .client-process__steps,
  .candidate-roles__grid,
  .candidate-journey__steps,
  .team-page__grid,
  .team-page-grid-section .team-page__grid,
  .contact-methods__grid,
  .contact-visit__grid,
  .client-services .class-tint-card,
  .candidate-roles a.class-tint-card {
    grid-template-columns: 1fr !important;
  }
}


/* ==========================================================================
   TRUST STRIP — mobile-friendly layout
   --------------------------------------------------------------------------
   Trust strip is a 4-column grid via inline styles on every page. On tablets
   it drops to 2x2 (still keeps the "row of proof points" feel); on very
   narrow phones it stacks to a single column.
   ========================================================================== */
@media (max-width: 720px) {
  .home-trust__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px 12px !important;
  }
  .home-trust__item {
    padding: 16px 8px !important;
  }
}
@media (max-width: 380px) {
  .home-trust__grid {
    grid-template-columns: 1fr !important;
  }
}


/* ==========================================================================
   WHY CLASS — 20px inset for the box row
   --------------------------------------------------------------------------
   The .home-why section is reused across Home / Client / Candidate / Team
   pages. Inline styles set only padding-block (96px top/bottom), leaving the
   feature-card row touching the section's coloured background edges. This
   inline-padding lifts the whole content row 20px in from the sides.
   ========================================================================== */
.home-why {
  padding-inline: 20px !important;
}


/* ==========================================================================
   FEATURED JOBS HEADING — match .candidate-roles__head h2
   --------------------------------------------------------------------------
   The JobAdmin FeaturedJobs module renders <h2 class="ja-h2">Featured jobs</h2>
   inside .ja-section-head. Its own Module.css gives it small blue-grey styling.
   Overrides here bring it in line with the .candidate-roles__head h2 visual
   (clamp(28px, 3vw, 40px), letter-spacing -0.025em, brand ink colour) so every
   "section head" heading on the site reads the same weight.
   ========================================================================== */
.ja-section-head .ja-h2,
.jobadmin-featured .ja-h2,
.jobadmin .ja-h2,
h2.ja-h2 {
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
  color: var(--c-ink-strong) !important;
  margin: 0 0 16px !important;
  text-transform: none !important;
}


/* ==========================================================================
   MODULE PAGE INTROS — small light-context blocks that sit under the compact
   hero, above the functional module. Same across Jobs / FAQ / News / Reg.
   ========================================================================== */
/* ==========================================================================
   MODULE PAGE INTRO — pill-chip treatment with per-page accent colour
   --------------------------------------------------------------------------
   Section 2 on Jobs / FAQ / News / Registration. Three reassurance points
   sit above the functional module (search, question list, news feed,
   registration wizard) — they answer the "is this the right page for me"
   question and set expectations. Upgraded from small inline text to
   proper pill chips carrying the page accent colour so the section feels
   intentional rather than filler.

   Base classes provide the pill shape; per-page modifier classes
   (.module-page-intro--jobs / --faq / --news / --registration) set the
   accent colour of the icon, the background tint, and the border.
   ========================================================================== */
.module-page-intro {
  padding: 48px 0 24px;
  text-align: center;
}
.module-page-intro__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}
.module-page-intro__points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}
.module-page-intro__points li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #110a1f;
  list-style: none;
  background: #fff;
  border: 1.5px solid #ece8f0;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.module-page-intro__points li:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(31, 21, 48, 0.08);
}
.module-page-intro__points svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Per-page accent overrides — background tint, border, icon colour.
   Text colour stays #110a1f across every page so the pills all read the
   same weight; the accent shows only in the tint, border, and icon. */
.module-page-intro--jobs .module-page-intro__points li {
  background: #fff5f5;
  border-color: rgba(225, 29, 72, 0.28);
}
.module-page-intro--jobs .module-page-intro__points svg { color: #e11d48; }

.module-page-intro--faq .module-page-intro__points li {
  background: #f0f9ff;
  border-color: rgba(2, 132, 199, 0.28);
}
.module-page-intro--faq .module-page-intro__points svg { color: #0284c7; }

.module-page-intro--news .module-page-intro__points li {
  background: #eef2ff;
  border-color: rgba(79, 70, 229, 0.28);
}
.module-page-intro--news .module-page-intro__points svg { color: #4f46e5; }

.module-page-intro--registration .module-page-intro__points li {
  background: #fff1f2;
  border-color: rgba(190, 18, 60, 0.28);
}
.module-page-intro--registration .module-page-intro__points svg { color: #be123c; }

@media (max-width: 640px) {
  .module-page-intro__points { gap: 10px; }
  .module-page-intro__points li {
    padding: 10px 18px;
    font-size: 14px;
  }
}


/* ==========================================================================
   TEAM PAGE
   ========================================================================== */

/* Team hero — same photo-background treatment */
.team-hero.class-hero {
  background:
    linear-gradient(135deg,
      rgba(26, 13, 43, 0.85) 0%,
      rgba(74, 14, 105, 0.72) 45%,
      rgba(123, 31, 162, 0.55) 100%
    ),
    url('/Portals/0/Images/team/team-hero.jpg') center center / cover no-repeat,
    linear-gradient(135deg, #1a0d2b 0%, #4a0e69 45%, #7b1fa2 100%);
}
.team-hero .class-hero__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.team-hero .class-hero__lead { margin-left: auto; margin-right: auto; }
.team-hero.class-hero--split .class-hero__inner,
.team-hero .class-hero__inner {
  grid-template-columns: 1fr;
  max-width: 900px;
  margin-inline: auto;
}
.team-hero .class-hero__figure { display: none; }

/* Team grid section — the main event on this page */
.team-page-grid-section {
  padding: 80px 0;
  scroll-margin-top: 100px;  /* so #the-team anchor doesn't sit under sticky header */
}

@media (max-width: 900px) {
  .team-page__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
  .team-page__grid { grid-template-columns: 1fr !important; }
}

.team-page__member:hover {
  transform: translateY(-4px);
  border-color: var(--c-purple-light) !important;
  box-shadow: 0 12px 32px rgba(31, 21, 48, 0.10) !important;
}
.team-page__member a[href^="tel:"]:hover {
  background: var(--c-purple-light) !important;
  color: #fff !important;
  text-decoration: none;
}
.team-page__member a[href^="mailto:"]:hover {
  color: var(--c-purple-deep) !important;
  text-decoration: underline;
}


/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */

/* Contact hero — same photo-background treatment as home / client / candidate */
.contact-hero.class-hero {
  background:
    linear-gradient(135deg,
      rgba(26, 13, 43, 0.85) 0%,
      rgba(74, 14, 105, 0.72) 45%,
      rgba(123, 31, 162, 0.55) 100%
    ),
    url('/Portals/0/Images/contact/contact-hero.jpg') center center / cover no-repeat,
    linear-gradient(135deg, #1a0d2b 0%, #4a0e69 45%, #7b1fa2 100%);
}
.contact-hero .class-hero__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.contact-hero .class-hero__lead { margin-left: auto; margin-right: auto; }
.contact-hero.class-hero--split .class-hero__inner,
.contact-hero .class-hero__inner {
  grid-template-columns: 1fr;
  max-width: 900px;
  margin-inline: auto;
}
.contact-hero .class-hero__figure { display: none; }

/* Three ways to reach us */
.contact-methods {
  padding: 80px 0;
  scroll-margin-top: 100px;  /* so #callback anchor doesn't sit under sticky header */
}
.contact-methods__head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}
.contact-methods__head h2 {
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.025em;
  margin: 0 0 16px;
}
.contact-methods__head .lead {
  color: var(--c-ink-muted);
  margin: 0;
  font-size: var(--t-lead);
  line-height: 1.6;
}
.contact-methods__grid a:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(31, 21, 48, 0.10);
  text-decoration: none;
}
@media (max-width: 900px) {
  .contact-methods__grid { grid-template-columns: 1fr !important; }
}

/* Write to us — intro above ContactForm module */
.contact-writein {
  padding: 48px 0 24px;
}
.contact-writein__head {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.contact-writein__head h2 {
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.025em;
  margin: 0 0 16px;
}
.contact-writein__head .lead {
  color: var(--c-ink-muted);
  margin: 0;
  font-size: var(--t-lead);
  line-height: 1.6;
}

/* Visit the office */
.contact-visit {
  padding: 80px 0;
  background: var(--c-bg-soft);
  border-radius: 28px;
  margin: 32px 0;
  padding-inline: 32px;
}
.contact-visit h2 {
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.025em;
  margin: 8px 0 12px;
}
.contact-visit .lead { color: var(--c-ink-muted); margin: 0; }
@media (max-width: 900px) {
  .contact-visit__grid { grid-template-columns: 1fr !important; }
  .contact-visit { padding: 48px 24px; }
}

/* Follow us */
.contact-social {
  padding: 64px 0;
}
.contact-social__grid a:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 28px rgba(123, 31, 162, 0.4) !important;
  text-decoration: none;
}


/* ==========================================================================
   CONTACT FORM MODULE — brand overrides
   Base classes from ContactForm module Module.css. Rules below map the
   default styling into the Class brand system. Cf-* selectors are the
   module's own — don't rename them.
   ========================================================================== */

.contactform.cf-full,
.contactform.cf-compact {
  padding: 48px 0;
  max-width: none;  /* override Module.css .cf-full max-width: 640px */
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}
.contactform .cf-full__inner,
.contactform .cf-compact__inner {
  max-width: none;
  width: 100%;
  padding: 48px 56px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 24px;
  box-shadow: 0 8px 30px rgba(31, 21, 48, 0.06);
  box-sizing: border-box;
}

/* Two-column responsive layout for the form fields — since the card is now
   full width, short fields (name, email, phone, reason) pair up on wider
   viewports; long fields (message, consent, actions) always span full width. */
.contactform .cf-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px;
}
.contactform .cf-form > .cf-field {
  flex: 1 1 calc(50% - 10px);
  min-width: 240px;
  margin: 0;
  box-sizing: border-box;
}
/* Full-width fields — Message textarea, Consent checkbox, Submit actions.
   :has() targets the field that contains the textarea so we don't need
   to identify Message by nth-child (fragile if module ever changes). */
.contactform .cf-form > .cf-field:has(.cf-input--area),
.contactform .cf-form > .cf-field--check,
.contactform .cf-form > .cf-full__actions,
.contactform .cf-form > .cf-compact__actions {
  flex-basis: 100%;
  min-width: 100%;
}

/* Below tablet, everything stacks to single column for readability */
@media (max-width: 720px) {
  .contactform .cf-form > .cf-field {
    flex-basis: 100%;
    min-width: 100%;
  }
  .contactform .cf-full__inner,
  .contactform .cf-compact__inner {
    padding: 32px 24px;
  }
}
.contactform .cf-full__head,
.contactform .cf-compact__head {
  margin-bottom: 24px;
  text-align: center;
}
.contactform .cf-h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--c-ink-strong);
  margin: 0 0 8px;
}
.contactform .cf-h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--c-ink-strong);
  margin: 0 0 8px;
}
.contactform .cf-full__sub,
.contactform .cf-compact__sub {
  font-size: 14px;
  color: var(--c-ink-muted);
  margin: 0;
}
.contactform .cf-field { margin-bottom: 16px; }
.contactform .cf-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--c-ink);
  display: block;
  margin-bottom: 6px;
}
.contactform .cf-label--required::after {
  content: " *";
  color: var(--c-error);
  font-weight: 700;
}
.contactform .cf-label__opt {
  font-weight: 400;
  color: var(--c-ink-subtle);
  font-size: 12px;
  margin-left: 4px;
}
.contactform .cf-input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--c-line-strong);
  border-radius: 12px;
  font-size: 15px;
  font-family: var(--font-body);
  color: var(--c-ink);
  background: #fff;
  transition: border-color 220ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-appearance: none;
  appearance: none;
}
.contactform .cf-input:focus {
  outline: none;
  border-color: var(--c-purple);
  box-shadow: 0 0 0 4px rgba(186, 104, 200, 0.25);
}
.contactform .cf-input--select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a4f66' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 44px;
}
.contactform .cf-input--area {
  min-height: 140px;
  resize: vertical;
}
.contactform .cf-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--c-ink-muted);
  cursor: pointer;
  line-height: 1.5;
}
.contactform .cf-check a {
  color: var(--c-purple-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.contactform .cf-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--c-purple-deep);
  flex-shrink: 0;
  margin-top: 2px;
}
.contactform .cf-full__actions,
.contactform .cf-compact__actions {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
.contactform .cf-btn {
  padding: 14px 28px;
  border-radius: 999px;
  border: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 220ms cubic-bezier(0.4, 0, 0.2, 1), transform 140ms cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.contactform .cf-btn--primary {
  background: var(--c-purple-deep);
  color: #fff;
  box-shadow: 0 4px 12px rgba(123, 31, 162, 0.2);
}
.contactform .cf-btn--primary:hover {
  background: var(--c-purple);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(123, 31, 162, 0.3);
}
.contactform .cf-btn--secondary {
  background: var(--c-purple-tint);
  color: var(--c-purple-deep);
}
.contactform .cf-btn--secondary:hover {
  background: var(--c-purple-light);
  color: #fff;
  text-decoration: none;
}
.contactform .cf-confirm {
  padding: 32px;
  background: var(--c-green-soft);
  color: var(--c-green-deep);
  border-radius: 16px;
  text-align: center;
}
.contactform .cf-confirm strong { font-weight: 700; }
.contactform .cf-confirm__ctas {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.contactform .cf-honey {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}


/* ==========================================================================
   CANDIDATE PAGE
   ========================================================================== */

/* Candidate hero — photo background with brand-purple gradient overlay */
.candidate-hero.class-hero {
  background:
    linear-gradient(135deg,
      rgba(26, 13, 43, 0.85) 0%,
      rgba(74, 14, 105, 0.72) 45%,
      rgba(123, 31, 162, 0.55) 100%
    ),
    url('/Portals/0/Images/candidate/candidate-hero.jpg') center center / cover no-repeat,
    linear-gradient(135deg, #1a0d2b 0%, #4a0e69 45%, #7b1fa2 100%);
}
.candidate-hero .class-hero__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.candidate-hero .class-hero__lead,
.candidate-hero .class-hero__search { margin-left: auto; margin-right: auto; }
.candidate-hero.class-hero--split .class-hero__inner,
.candidate-hero .class-hero__inner {
  grid-template-columns: 1fr;
  max-width: 900px;
  margin-inline: auto;
}
.candidate-hero .class-hero__figure { display: none; }

/* Roles grid — 4 tint cards */
.candidate-roles {
  padding: 80px 0;
}
.candidate-roles__head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}
.candidate-roles__head h2 {
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.025em;
  margin: 0 0 16px;
}
.candidate-roles__head .lead {
  color: var(--c-ink-muted);
  margin: 0;
  font-size: var(--t-lead);
  line-height: 1.6;
}
.candidate-roles__grid a:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(31, 21, 48, 0.10);
  text-decoration: none;
}
@media (max-width: 900px) {
  .candidate-roles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 540px) {
  .candidate-roles__grid { grid-template-columns: 1fr !important; }
}

/* Journey / How it works — 4 numbered step cards */
.candidate-journey {
  padding: 80px 0;
  background: var(--c-bg-soft);
  border-radius: 28px;
  margin: 32px 0;
}
.candidate-journey__head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
  padding-inline: 24px;
}
.candidate-journey__head h2 {
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.025em;
  margin: 0 0 16px;
}
.candidate-journey__head .lead {
  color: var(--c-ink-muted);
  margin: 0;
  font-size: var(--t-lead);
  line-height: 1.6;
}
.candidate-journey__steps {
  padding-inline: 24px !important;
}
@media (max-width: 900px) {
  .candidate-journey__steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
  .candidate-journey__steps { grid-template-columns: 1fr !important; }
}
.candidate-journey__step {
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), border-color 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.candidate-journey__step:hover {
  transform: translateY(-2px);
  border-color: var(--c-purple-light) !important;
}


/* ==========================================================================
   CLIENT PAGE
   ========================================================================== */

/* Client hero — photo background + brand-purple gradient overlay.
   Fallback gradient underneath so nothing breaks if photo is missing. */
.client-hero.class-hero {
  background:
    linear-gradient(135deg,
      rgba(26, 13, 43, 0.88) 0%,
      rgba(74, 14, 105, 0.72) 45%,
      rgba(123, 31, 162, 0.55) 100%
    ),
    url('/Portals/0/Images/client/client-hero.jpg') center center / cover no-repeat,
    linear-gradient(135deg, #1a0d2b 0%, #4a0e69 45%, #7b1fa2 100%);
}

/* Same centred single-column body treatment as the home hero */
.client-hero .class-hero__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.client-hero .class-hero__lead,
.client-hero .class-hero__search { margin-left: auto; margin-right: auto; }
.client-hero.class-hero--split .class-hero__inner,
.client-hero .class-hero__inner {
  grid-template-columns: 1fr;
  max-width: 900px;
  margin-inline: auto;
}
.client-hero .class-hero__figure { display: none; }

/* WHAT WE DO — services strip */
.client-services {
  padding: 80px 0;
}
.client-services__head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}
.client-services__head h2 {
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.025em;
  margin: 0 0 16px;
}
.client-services__head .lead {
  color: var(--c-ink-muted);
  margin: 0;
  font-size: var(--t-lead);
  line-height: 1.6;
}
@media (max-width: 900px) {
  .client-services__grid { grid-template-columns: 1fr !important; }
}
.client-services .class-tint-card {
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.client-services .class-tint-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(31, 21, 48, 0.08);
}

/* HOW WE WORK — process steps */
.client-process {
  padding: 80px 0;
  background: var(--c-bg-soft);
  border-radius: 28px;
  margin: 32px 0;
}
.client-process__head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
  padding-inline: 24px;
}
.client-process__head h2 {
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.025em;
  margin: 0 0 16px;
}
.client-process__head .lead {
  color: var(--c-ink-muted);
  margin: 0;
  font-size: var(--t-lead);
  line-height: 1.6;
}
.client-process__steps {
  padding-inline: 24px !important;
}
@media (max-width: 900px) {
  .client-process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
  .client-process__steps { grid-template-columns: 1fr !important; }
}
.client-process__step {
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), border-color 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.client-process__step:hover {
  transform: translateY(-2px);
  border-color: var(--c-purple-light) !important;
}


/* ==========================================================================
   PAGE IDENTITY — accent eyebrow + accent stripe
   ==========================================================================
   Wayfinding for every non-home page. Two coordinated moves:

   1. Accent eyebrow — the existing eyebrow ("For nurseries · Since 1995",
      "Latest jobs · Updated daily", etc.) is bumped up in size, weight,
      and letter-spacing, and coloured with the page accent tint. Uses
      vocabulary that was already there — no new markup, no extra element
      to fight the H1 for attention. Just a single, unmistakable "this is
      what page you're on" line.

   2. Accent stripe — 4px colour-coded line along the bottom edge of the
      hero. Same colour family as the eyebrow. Marks the boundary between
      banner and content, and gives each page a subtle colour signature.

   Page palette (bright hero variant / deep stripe variant):
     Content pages
       .client-hero       → teal       (#5eead4 / #0d9488)
       .candidate-hero    → pink       (#f9a8d4 / #db2777)
       .team-hero         → green      (#86efac / #16a34a)
       .contact-hero      → amber      (#fcd34d / #d97706)
     Module pages
       .jobs-hero         → coral      (#fb7185 / #e11d48)
       .faq-hero          → sky blue   (#7dd3fc / #0284c7)
       .news-hero         → indigo     (#a5b4fc / #4f46e5)
       .registration-hero → warm rose  (#fda4af / #be123c)
*/

/* Accent eyebrow — prominence bump + per-page colour.
   Base rule sets size/weight/spacing across every page; the per-page
   rule sets just the colour. */
.client-hero .class-hero__eyebrow,
.candidate-hero .class-hero__eyebrow,
.team-hero .class-hero__eyebrow,
.contact-hero .class-hero__eyebrow,
.jobs-hero .class-hero__eyebrow,
.faq-hero .class-hero__eyebrow,
.news-hero .class-hero__eyebrow,
.registration-hero .class-hero__eyebrow {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.2em;
  margin-bottom: 24px;
}

/* Content pages */
.client-hero .class-hero__eyebrow       { color: #5eead4; }  /* teal      */
.candidate-hero .class-hero__eyebrow    { color: #f9a8d4; }  /* pink      */
.team-hero .class-hero__eyebrow         { color: #86efac; }  /* green     */
.contact-hero .class-hero__eyebrow      { color: #fcd34d; }  /* amber     */
/* Module pages */
.jobs-hero .class-hero__eyebrow         { color: #fb7185; }  /* coral     */
.faq-hero .class-hero__eyebrow          { color: #7dd3fc; }  /* sky blue  */
.news-hero .class-hero__eyebrow         { color: #a5b4fc; }  /* indigo    */
.registration-hero .class-hero__eyebrow { color: #fda4af; }  /* warm rose */

/* Bottom accent stripe — pseudo-element so it doesn't affect layout */
.class-hero.client-hero::after,
.class-hero.candidate-hero::after,
.class-hero.team-hero::after,
.class-hero.contact-hero::after,
.class-hero.jobs-hero::after,
.class-hero.faq-hero::after,
.class-hero.news-hero::after,
.class-hero.registration-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  z-index: 4;
  pointer-events: none;
}
/* Content pages */
.class-hero.client-hero::after       { background: #0d9488; }  /* teal      */
.class-hero.candidate-hero::after    { background: #db2777; }  /* pink      */
.class-hero.team-hero::after         { background: #16a34a; }  /* green     */
.class-hero.contact-hero::after      { background: #d97706; }  /* amber     */
/* Module pages */
.class-hero.jobs-hero::after         { background: #e11d48; }  /* coral     */
.class-hero.faq-hero::after          { background: #0284c7; }  /* sky blue  */
.class-hero.news-hero::after         { background: #4f46e5; }  /* indigo    */
.class-hero.registration-hero::after { background: #be123c; }  /* warm rose */


/* ==========================================================================
   HOME PAGE
   ========================================================================== */

/* ------------------------------- HERO ------------------------------------ */
/* The reusable .class-hero, .class-hero--split, and .class-hero__* primitives
   live in skin.css so the hero renders correctly even before portal.css
   deploys. This block only holds home-specific tweaks (extra orb + small
   title-size bump). */

.home-hero .class-hero__title {
  /* Home leans slightly larger than the reusable hero base */
  font-size: clamp(44px, 5.8vw, 78px);
}

.class-hero__search button.class-hero__search-btn,
.class-hero__search > button,
.class-hero__search button[type="button"],
.class-hero__search button[type="submit"] {
  background: #fff !important;
  color: var(--c-purple-deep) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: var(--t-body) !important;
  line-height: 1 !important;
  padding: 12px 22px !important;
  border: 0 !important;
  border-radius: var(--r-pill) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease), color var(--dur) var(--ease) !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  height: auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  outline: none !important;
}
.class-hero__search button.class-hero__search-btn:hover,
.class-hero__search > button:hover {
  background: var(--c-purple-tint) !important;
  color: var(--c-purple-deep) !important;
}
.class-hero__search button.class-hero__search-btn:active,
.class-hero__search > button:active { transform: translateY(1px) !important; }
.class-hero__search button.class-hero__search-btn:focus-visible,
.class-hero__search > button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(186, 104, 200, 0.5) !important;
}


/* ------------------------------- TRUST STRIP ----------------------------- */

.home-trust {
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--c-line);
}
.home-trust__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  text-align: center;
}
.home-trust__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s-3);
  margin: 0;
}
.home-trust__number {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--c-purple-deep);
  line-height: 1;
}
.home-trust__label {
  font-size: var(--t-small);
  color: var(--c-ink-muted);
  line-height: 1.4;
}
@media (max-width: 720px) {
  .home-trust__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
}


/* ------------------------------- WHY CLASS ------------------------------- */

.home-why {
  position: relative;
  overflow: hidden;
  padding-block: var(--s-10) var(--s-9);
  background:
    /* Soft brand-accent washes that echo the moodboard's accent-tone system,
       drifting off-centre so nothing feels too balanced or too formal. */
    radial-gradient(600px 400px at 8% 12%,  rgba(186, 104, 200, 0.10), transparent 60%),
    radial-gradient(700px 500px at 92% 88%, rgba(0,   172, 193, 0.09), transparent 60%),
    radial-gradient(500px 350px at 50% 45%, rgba(255, 160, 0,  0.05), transparent 55%),
    var(--c-bg-soft);
}
.home-why > * { position: relative; z-index: 2; }

/* Subtle purple mist strip under the section head — draws the eye down into
   the grid without needing hard rules or dividers. */
.home-why__head {
  max-width: 720px;
  margin: 0 auto var(--s-8);
  text-align: center;
}
.home-why__head .eyebrow { margin-bottom: var(--s-3); }
.home-why__head h2 {
  font-size: clamp(30px, 3.5vw, 46px);
  letter-spacing: -0.025em;
  margin: 0 0 var(--s-4);
}
.home-why__head .lead {
  color: var(--c-ink-muted);
  margin: 0;
  font-size: var(--t-lead);
  line-height: 1.6;
}

.home-why__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}

/* Feature boxes get a proper card treatment — white surface, soft border,
   quiet shadow — and a subtle accent-tone wash from the top-left corner so
   each card carries a hint of its accent colour without shouting. */
.home-why .class-feature {
  padding: var(--s-6);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  position: relative;
  overflow: hidden;
}
.home-why .class-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(400px 300px at 0% 0%, currentColor, transparent 60%);
  opacity: 0.04;
  pointer-events: none;
}
.home-why .class-feature--purple { color: var(--c-purple-deep); }
.home-why .class-feature--teal   { color: var(--c-teal-deep); }
.home-why .class-feature--green  { color: var(--c-green-deep); }
.home-why .class-feature--pink   { color: var(--c-pink-deep); }
.home-why .class-feature--amber  { color: var(--c-amber-deep); }
.home-why .class-feature--coral  { color: var(--c-coral-deep); }

.home-why .class-feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: currentColor;
}
.home-why .class-feature > * { position: relative; z-index: 1; }

.home-why .class-feature h3 {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 700;
  color: var(--c-ink-strong);
  margin: 0 0 var(--s-3);
}
.home-why .class-feature p {
  margin: 0;
  color: var(--c-ink-muted);
  line-height: var(--lh-normal);
}
.home-why .class-feature__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  margin-bottom: var(--s-4);
}

@media (max-width: 900px) {
  .home-why { padding-block: var(--s-9) var(--s-8); }
  .home-why__grid { grid-template-columns: 1fr; gap: var(--s-4); }
}
@media (max-width: 720px) {
  .home-why { padding-block: var(--s-8) var(--s-7); }
}


/* ------------------------------- FINAL CTA ------------------------------- */

.home-cta {
  position: relative;
  overflow: hidden;
  padding: var(--s-8) 0;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(700px 400px at 20% 20%, rgba(186, 104, 200, 0.25), transparent 60%),
    radial-gradient(600px 350px at 90% 80%, rgba(214, 22, 113, 0.18), transparent 60%),
    linear-gradient(135deg, #7b1fa2 0%, #4a0e69 100%);
}
.home-cta__inner { position: relative; z-index: 2; }
.home-cta__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 var(--s-4);
  background: linear-gradient(135deg, #ffffff 0%, #ba68c8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.home-cta__lead {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  max-width: 56ch;
  margin: 0 auto var(--s-6);
}
.home-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
  justify-content: center;
}
.home-cta__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-lead);
  color: #fff;
  text-decoration: none;
  padding: 12px 8px;
  transition: color var(--dur) var(--ease);
}
.home-cta__phone:hover { color: var(--c-purple-light); text-decoration: none; }
.home-cta__phone svg { color: var(--c-purple-light); }

.home-cta__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 1;
  animation: homeCtaDrift 20s ease-in-out infinite;
}
.home-cta__orb--1 { width: 380px; height: 380px; background: #ba68c8; top: -80px; left: 8%; opacity: 0.4; }
.home-cta__orb--2 { width: 320px; height: 320px; background: #d61671; bottom: -80px; right: 8%; opacity: 0.3; animation-delay: -10s; }
@keyframes homeCtaDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(30px, -20px) scale(1.05); }
}

@media (max-width: 720px) { .home-cta { padding: var(--s-6) 0; } }


/* ==========================================================================
   NEWS MODULE — brand overrides
   Base classes and grid layout come from ~/DesktopModules/ClassNews/css/Module.css
   These rules override the module's default styling to match the Class brand.
   ========================================================================== */

.classnews-featured { padding: var(--s-6) 0; }
.classnews .cn-section-head { margin-bottom: var(--s-5); }
.classnews .cn-h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--c-ink-strong);
  margin: 0 0 var(--s-4);
}

.classnews .cn-cards { gap: var(--s-4); }

.classnews .cn-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all var(--dur) var(--ease);
}
.classnews .cn-card:hover {
  border-color: var(--c-purple-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
}
.classnews .cn-card__hero {
  aspect-ratio: 16 / 9;
  background: var(--c-purple-tint);
  overflow: hidden;
}
.classnews .cn-card__body { padding: var(--s-5); gap: var(--s-3); }
.classnews .cn-card__date {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 10px;
  background: var(--c-purple-tint);
  color: var(--c-purple-deep);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  align-self: flex-start;
}
.classnews .cn-date-day, .classnews .cn-date-month { font-size: var(--t-micro); }
.classnews .cn-card__title {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--c-ink-strong);
}
.classnews .cn-card__summary {
  font-size: var(--t-small);
  line-height: var(--lh-normal);
  color: var(--c-ink-muted);
}
.classnews .cn-card__author { font-size: var(--t-small); color: var(--c-ink-subtle); }
.classnews .cn-card__cta {
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--c-line);
  color: var(--c-purple-deep);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-small);
}
.classnews .cn-card:hover .cn-card__cta { color: var(--c-purple); }


/* ==========================================================================
   REVIEWS MODULE — brand overrides
   Base classes come from ~/DesktopModules/CompanyReviews/css/Module.css
   Overrides map the tab / card / star styling into the Class brand system.
   ========================================================================== */

.cr-display { padding: var(--s-6) 0; }

/* Tabs */
.cr-display .cr-tabs {
  display: inline-flex;
  gap: 4px;
  background: var(--c-bg-tint);
  padding: 6px;
  border-radius: var(--r-pill);
  border: 0;
  margin-bottom: var(--s-5);
}
.cr-display .cr-tab {
  padding: 10px 20px;
  background: transparent;
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-small);
  color: var(--c-ink-muted);
  cursor: pointer;
  margin-bottom: 0;
  transition: all var(--dur) var(--ease);
}
.cr-display .cr-tab:hover { color: var(--c-purple-deep); }
.cr-display .cr-tab--active {
  background: #fff;
  color: var(--c-purple-deep);
  border: 0;
  box-shadow: var(--shadow-sm);
}

/* Cards */
.cr-display .cr-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-4);
}
.cr-display .cr-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: none;
  gap: var(--s-3);
  transition: all var(--dur) var(--ease);
}
.cr-display .cr-card:hover { border-color: var(--c-purple-light); box-shadow: var(--shadow-md); }
.cr-display .cr-card__author {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-body);
  color: var(--c-ink-strong);
}
.cr-display .cr-card__date { font-size: var(--t-micro); color: var(--c-ink-subtle); }
.cr-display .cr-card__avatar--initial {
  background: var(--c-purple-tint);
  color: var(--c-purple-deep);
  font-family: var(--font-display);
}
.cr-display .cr-card__stars { font-size: 1rem; }
.cr-display .cr-star--filled { color: var(--c-amber); }
.cr-display .cr-star--empty  { color: var(--c-line-strong); }
.cr-display .cr-card__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--c-ink);
}
.cr-display .cr-card__source {
  background: var(--c-purple-tint);
  color: var(--c-purple-deep);
  font-family: var(--font-display);
  font-size: var(--t-micro);
  padding: 3px 10px;
  border-radius: var(--r-pill);
}


/* ==========================================================================
   JOB ALERT SIGNUP — brand overrides
   Base classes come from the JobAdmin module. The skin already covers the
   .ja-input / .ja-btn base — these rules add the signup-specific wrapper.
   ========================================================================== */

.ja-alert-signup {
  padding: var(--s-8) 0;
  background:
    radial-gradient(500px 300px at 80% 10%, rgba(186,104,200,0.12), transparent 60%),
    var(--c-purple-mist);
  border-radius: var(--r-xl);
}
.ja-alert-signup__inner {
  max-width: 560px;
  margin-inline: auto;
  padding-inline: var(--s-5);
  text-align: center;
}
.ja-alert-signup__head { margin-bottom: var(--s-5); }
.ja-alert-signup .ja-h3 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--c-ink-strong);
  margin: 0 0 var(--s-3);
}
.ja-alert-signup__sub {
  font-size: var(--t-body);
  color: var(--c-ink-muted);
  line-height: 1.6;
  margin: 0;
}
.ja-alert-signup__form { text-align: left; }
.ja-alert-signup .ja-field { margin-bottom: var(--s-3); }
.ja-alert-signup .ja-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-small);
  display: block;
  margin-bottom: var(--s-2);
}
.ja-alert-signup .ja-label--required::after { content: " *"; color: var(--c-error); }
.ja-alert-signup .ja-input {
  width: 100%;
  padding: 14px var(--s-4);
  background: #fff;
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--r-md);
  font-size: var(--t-body);
  transition: all var(--dur) var(--ease);
}
.ja-alert-signup .ja-input:focus {
  outline: none;
  border-color: var(--c-purple);
  box-shadow: var(--shadow-focus);
}
.ja-alert-signup .ja-field--check { margin: var(--s-4) 0; }
.ja-alert-signup .ja-check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--t-small);
  color: var(--c-ink-muted);
  cursor: pointer;
  line-height: 1.5;
}
.ja-alert-signup__actions { display: flex; justify-content: center; margin-top: var(--s-3); }
.ja-alert-signup .ja-btn--primary {
  background: var(--c-purple-deep);
  color: #fff;
  padding: 14px 28px;
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-body);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
  box-shadow: var(--shadow-md);
}
.ja-alert-signup .ja-btn--primary:hover { background: var(--c-purple); }
.ja-alert-signup__confirm {
  padding: var(--s-5);
  background: var(--c-green-soft);
  color: var(--c-green-deep);
  border-radius: var(--r-md);
  text-align: center;
}

/* Honeypot — visually hidden, still in DOM */
.ja-alert-signup__honey {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ==========================================================================
   REGISTRATION — bottom section three-step grid
   --------------------------------------------------------------------------
   Mobile stack for the "What happens from here" cards below the wizard.
   Three columns on desktop, two on tablet, one on phone.
   ========================================================================== */
@media (max-width: 800px) {
  .registration-bottom__steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 520px) {
  .registration-bottom__steps { grid-template-columns: 1fr !important; }
}


/* ==========================================================================
   JOB ALERTS MODAL — site-wide popup wrapping the real JobAlertSignup control
   --------------------------------------------------------------------------
   Chrome only — the form styling lives in the .ja-alert-signup rules above
   (used both inline on /jobs and inside the modal). Overrides below reshape
   .ja-alert-signup so it drops cleanly into the modal card without its
   inline-page background / padding.
   ========================================================================== */

.class-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}
/* State is driven purely by aria-hidden. We tried :target as a no-JS
   fallback but it fights aria-hidden closing — browsers don't always
   re-evaluate :target after history.replaceState clears the hash, so the
   modal stayed visually open. Since the rest of the site needs JS anyway
   (burger, search, hero), aria-hidden alone is the safer state driver. */
.class-modal[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.class-modal__backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(26, 13, 43, 0.55) 0%, rgba(74, 14, 105, 0.45) 45%, rgba(123, 31, 162, 0.35) 100%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}

.class-modal__container {
  position: relative;
  z-index: 1;
  max-width: 560px;
  width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 24px 64px rgba(31, 21, 48, 0.35);
  padding: 40px 40px 32px;
  transform: translateY(12px) scale(0.98);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.class-modal[aria-hidden="false"] .class-modal__container {
  transform: translateY(0) scale(1);
}

.class-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: 0;
  background: rgba(31, 21, 48, 0.04);
  color: #5a4f66;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
.class-modal__close:hover {
  background: rgba(31, 21, 48, 0.08);
  color: #110a1f;
}

.class-modal__body { margin-top: 4px; }

/* Body-scroll lock while modal is open */
body.is-modal-open { overflow: hidden; }

/* Reshape the embedded JobAlertSignup control for the modal card.
   These override the inline-page styles (radial background, big padding). */
.class-modal .ja-alert-signup {
  padding: 0;
  background: none;
  border-radius: 0;
}
.class-modal .ja-alert-signup__inner {
  padding-inline: 0;
  max-width: none;
}
.class-modal .ja-alert-signup__head { margin-bottom: 20px; }
.class-modal .ja-h3 { font-size: 26px; }

/* Mobile — full-height sheet, no rounded corners at edges */
@media (max-width: 600px) {
  .class-modal { padding: 0; align-items: stretch; }
  .class-modal__container {
    max-width: none;
    max-height: 100vh;
    border-radius: 0;
    padding: 56px 24px 28px;
  }
}


/* ==========================================================================
   JOB ALERTS FAB — bell button stacked above the contact FAB
   --------------------------------------------------------------------------
   Same delayed-appear + session-dismissible pattern as the contact FAB
   (see skin.js §8). Positioned above it so both are visible without fight.
   ========================================================================== */

.class-fab-alerts {
  position: fixed;
  right: 24px;
  bottom: 96px;
  z-index: 900;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #7b1fa2;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(31, 21, 48, 0.28);
  transform: translateY(20px) scale(0.9);
  opacity: 0;
  pointer-events: none;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), opacity 260ms ease, background 200ms ease;
}
.class-fab-alerts.is-visible {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.class-fab-alerts.is-dismissed { display: none; }
.class-fab-alerts:hover { background: #6b1494; }

.class-fab-alerts__dismiss {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #5a4f66;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 2px 6px rgba(31, 21, 48, 0.15);
  transition: background 180ms ease, color 180ms ease;
}
.class-fab-alerts__dismiss:hover { background: #f4eff8; color: #110a1f; }

@media (max-width: 480px) {
  .class-fab-alerts { right: 16px; bottom: 88px; width: 48px; height: 48px; }
}


/* ==========================================================================
   FOOTER — Job Alerts link in the brand block
   ========================================================================== */

.class-footer__alerts {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  margin: 4px 0 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: #fff;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 200ms ease, border-color 200ms ease;
}
.class-footer__alerts:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
}


/* ==========================================================================
   JOBS PAGE — scroll-triggered alerts toast
   --------------------------------------------------------------------------
   Injected by skin.js §9 once the user scrolls past 35% of the Jobs page.
   Slim strip at the bottom of the viewport, coral (Jobs accent) icon.
   Dismissible; session-remembered.
   ========================================================================== */

.jobs-alerts-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 40px);
  z-index: 850;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 22px;
  background: #fff;
  border: 1.5px solid rgba(225, 29, 72, 0.28);
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(31, 21, 48, 0.16);
  opacity: 0;
  pointer-events: none;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), opacity 240ms ease;
  max-width: calc(100vw - 32px);
}
.jobs-alerts-toast.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
.jobs-alerts-toast > svg { color: #e11d48; flex-shrink: 0; }
.jobs-alerts-toast__msg {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #110a1f;
  line-height: 1.4;
}
.jobs-alerts-toast__msg a {
  color: #e11d48;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(225, 29, 72, 0.35);
  transition: border-color 180ms ease;
}
.jobs-alerts-toast__msg a:hover { border-bottom-color: #e11d48; }
.jobs-alerts-toast__dismiss {
  width: 24px;
  height: 24px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: rgba(31, 21, 48, 0.06);
  color: #5a4f66;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 180ms ease, color 180ms ease;
}
.jobs-alerts-toast__dismiss:hover { background: rgba(31, 21, 48, 0.12); color: #110a1f; }

@media (max-width: 480px) {
  .jobs-alerts-toast {
    left: 16px; right: 16px; transform: translate(0, 40px);
    padding: 12px 14px;
  }
  .jobs-alerts-toast.is-visible { transform: translate(0, 0); }
  .jobs-alerts-toast__msg { font-size: 13px; }
}