/* Behaviour that used to come from Framer's JavaScript runtime, rebuilt in plain CSS.
   Pair with assets/site.js. */

/* ---------- Sticky header (all pages) ----------
   site.js pins the visible header with position:fixed (CSS sticky can't work: Framer's page
   wrappers use overflow:hidden). Transparent over the hero, dark once the page is scrolled. */
header.ry-sticky {
  position: fixed !important;
  top: 0;
  z-index: 100;
  height: auto !important;
  transition: background-color .25s ease, box-shadow .25s ease, padding .25s ease;
}
header.ry-sticky.ry-stuck {
  background-color: rgba(13, 27, 32, .97) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
}
/* Anchor targets (#ourteam etc.) shouldn't end up under the pinned header */
html { scroll-padding-top: 120px; }

/* ---------- Burger menu (tablet + phone header) ---------- */
.ry-menu-toggle { cursor: pointer; }
.ry-menu-toggle:focus-visible { outline: 2px solid #6648fe; outline-offset: 4px; border-radius: 4px; }

/* Open state renders as a dropdown panel over the page instead of overflowing
   the header's fixed-height slot with a transparent background. */
:has(> header.framer-v-g3nlef) { z-index: 100 !important; }
header.framer-HmSbA.framer-v-g3nlef {
  position: absolute !important;
  top: 0; left: 0; right: 0;
  height: auto !important;
  max-height: 100vh;
  overflow-y: auto;
  justify-content: flex-start !important;
  background-color: #0d1b20 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}
header.ry-sticky.framer-HmSbA.framer-v-g3nlef { position: fixed !important; } /* open menu stays pinned */

/* ---------- Home "About us" side menu ----------
   "Our Team" / "Core Ambitions" / "Our Values" take the look of the active "About Us" item on hover. */
.framer-woxxr6 .framer-f4FjZ { transition: background-color .2s ease; }
.framer-woxxr6:hover .framer-f4FjZ,
.framer-woxxr6:focus-visible .framer-f4FjZ { background-color: #6648fe !important; }
.framer-woxxr6:hover .framer-f4FjZ .framer-8byu36,
.framer-woxxr6:focus-visible .framer-f4FjZ .framer-8byu36 { --extracted-r6o4lv: #fff !important; }
.framer-woxxr6:hover .framer-f4FjZ .framer-text,
.framer-woxxr6:focus-visible .framer-f4FjZ .framer-text { --framer-font-weight: 600 !important; }

/* ---------- FAQ accordion ---------- */
.ry-faq { cursor: pointer; }
.ry-faq:focus-visible { outline: 2px solid #6648fe; outline-offset: 2px; }
.ry-faq:not(.ry-open) .framer-1rj53z9 { display: none; }
.ry-faq .framer-d82djz { transition: transform .2s ease; }
.ry-faq.ry-open .framer-d82djz { transform: rotate(45deg) !important; }
/* Phone layout: answer stacked under the question, icon stays top-right like desktop */
.ry-faq.ry-open.framer-v-1glmk9b { align-items: flex-start !important; }
.ry-faq.ry-open.framer-v-1glmk9b .framer-1z7f8r { flex-direction: column; align-items: flex-start; gap: 16px; }
.ry-faq.ry-open.framer-v-1glmk9b .framer-vvtw5y,
.ry-faq.ry-open.framer-v-1glmk9b .framer-1rj53z9 { flex: none; width: 100%; }

/* ---------- "Why choose us" slideshow ---------- */
.ry-slideshow { opacity: 1 !important; }
.ry-slideshow ul { transition: transform .7s cubic-bezier(.4, 0, .2, 1); cursor: default !important; }
.ry-slideshow ul > li > * { flex-shrink: 0; width: 100%; height: 100%; visibility: visible !important; }
@media (prefers-reduced-motion: reduce) {
  .ry-slideshow ul { transition: none; }
}

/* ---------- Jobs: listing (jobs.html) and job pages (jobs/*.html), generated by tools/build_jobs.py ---------- */
.ry-jobs, .ry-job { --ry-purple: #6648fe; --ry-ink: rgba(0, 0, 0, .85); --ry-muted: rgba(0, 0, 0, .6);
  width: 100%; flex: none; font-family: "Montserrat", "Montserrat Placeholder", sans-serif; color: var(--ry-ink); }
.ry-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ry-jobs-filter { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin: 8px 0 16px; }
.ry-jobs-filter input[type="search"] { flex: 1 1 280px; min-width: 0; padding: 14px 18px; font: inherit; font-size: 16px;
  border: 1px solid rgba(0, 0, 0, .15); border-radius: 12px; background: #fff; color: var(--ry-ink); }
.ry-jobs-filter input[type="search"]:focus { outline: 2px solid var(--ry-purple); outline-offset: 1px; border-color: transparent; }
.ry-jobs-remote { display: inline-flex; gap: 8px; align-items: center; font-size: 15px; font-weight: 500; cursor: pointer; }
.ry-jobs-remote input { width: 18px; height: 18px; accent-color: var(--ry-purple); }
.ry-jobs-count { margin: 0 0 16px; font-size: 14px; font-weight: 600; color: var(--ry-muted); }
.ry-jobs-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; align-items: start; }
.ry-jobs-layout:not(:has(.ry-facets)) { grid-template-columns: minmax(0, 1fr); }
.ry-facets { position: sticky; top: 120px; padding: 20px; background: #fff; border: 1px solid rgba(0, 0, 0, .1); border-radius: 16px; }
.ry-facets > summary { display: none; }
.ry-facet { margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.ry-facet legend { margin: 0 0 10px; padding: 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ry-ink); }
.ry-facet-option { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 15px; cursor: pointer; }
.ry-facet-option input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--ry-purple); cursor: pointer; }
.ry-facet-option span:first-of-type { flex: 1; min-width: 0; overflow-wrap: break-word; }
.ry-facet-n { flex: none; min-width: 24px; padding: 1px 8px; border-radius: 999px; background: rgba(102, 72, 254, .08); color: var(--ry-purple);
  font-size: 13px; font-weight: 600; text-align: center; }
.ry-facet-option:has(input:disabled) { opacity: .4; cursor: default; }
.ry-facets-clear { padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--ry-purple); cursor: pointer; }
.ry-facets-clear:hover { text-decoration: underline; }
.ry-jobs-empty { margin: 24px 0; font-size: 16px; }
.ry-jobs-empty a, .ry-job-body a { color: var(--ry-purple); }

.ry-job-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.ry-job-card[hidden] { display: none; }
.ry-job-card a { display: flex; flex-direction: column; gap: 12px; height: 100%; box-sizing: border-box; padding: 24px;
  background: #fff; border: 1px solid rgba(0, 0, 0, .1); border-radius: 16px; color: inherit; text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.ry-job-card a:hover, .ry-job-card a:focus-visible { border-color: var(--ry-purple); box-shadow: 0 12px 32px rgba(102, 72, 254, .12); transform: translateY(-2px); outline: none; }
.ry-job-card-title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.25; color: var(--ry-purple); }
.ry-job-card-text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ry-muted); }
.ry-job-card-more { margin-top: auto; font-size: 15px; font-weight: 600; color: var(--ry-purple); }

.ry-job-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; font-size: 14px; font-weight: 500; color: var(--ry-muted); }
.ry-job-meta li { display: inline-flex; align-items: center; gap: 6px; }
.ry-job-meta svg { width: 16px; height: 16px; fill: none; stroke: var(--ry-purple); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ry-job { max-width: 820px; align-self: flex-start; } /* left edge lines up with the page title */
/* Job pages reuse the fixed-height hero; let it grow so long job titles aren't cut off on phones. */
body:has(.ry-job) section.framer-t262yn, body:has(.ry-job) .framer-150lvsz { height: auto !important; }
body:has(.ry-job) .framer-1245i94 { position: relative !important; height: auto !important; inset: auto !important; padding-bottom: 40px; }
body:has(.ry-job) .framer-1102lkt { white-space: normal !important; width: 100% !important; flex: 1 1 auto !important; }
body:has(.ry-job) .framer-1102lkt h1 { white-space: normal !important; }
body:has(.ry-job) .framer-ihrpsp { inset: 0 !important; height: auto !important; } /* background photo fills the taller hero */
.ry-job-back { display: inline-flex; gap: 6px; margin-bottom: 20px; font-size: 15px; font-weight: 600; color: var(--ry-purple); text-decoration: none; }
.ry-job-back:hover { text-decoration: underline; }
.ry-job > .ry-job-meta { font-size: 15px; margin-bottom: 24px; }
/* Desktop: the job facts stay on one line, even a little wider than the text column. */
@media (min-width: 1200px) { .ry-job > .ry-job-meta { flex-wrap: nowrap; width: max-content; white-space: nowrap; } }
.ry-job-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 32px; }
.ry-job-actions-end { margin: 40px 0 0; }
.ry-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 32px; border-radius: 10px;
  background: var(--ry-purple); color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; border: 2px solid var(--ry-purple);
  transition: background-color .2s ease, color .2s ease; }
.ry-btn:hover, .ry-btn:focus-visible { background: #5235e8; border-color: #5235e8; outline: none; }
.ry-btn-ghost { background: transparent; color: var(--ry-purple); }
.ry-btn-ghost:hover, .ry-btn-ghost:focus-visible { background: rgba(102, 72, 254, .08); border-color: var(--ry-purple); }
.ry-job-body { font-size: 17px; line-height: 1.65; }
.ry-job-body h2, .ry-job-body h3 { margin: 32px 0 12px; font-size: var(--ry-content-h2, 24px); font-weight: 600; line-height: 1.25; color: #000; }
.ry-job-body h3 { font-size: var(--ry-content-h3, 20px); }
.ry-job-body p { margin: 0 0 14px; }
.ry-job-body ul, .ry-job-body ol { margin: 0 0 18px; padding-left: 22px; }
.ry-job-body li { margin: 0 0 8px; }
.ry-job-body li::marker { color: var(--ry-purple); }
@media (max-width: 809px) {
  .ry-job-list { grid-template-columns: 1fr; }
  .ry-job-card-text { display: none; }
  .ry-jobs-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ry-facets { position: static; padding: 0; }
  .ry-facets > summary { display: flex; align-items: center; gap: 6px; padding: 14px 18px; font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; }
  .ry-facets > summary::-webkit-details-marker { display: none; }
  .ry-facets > summary::after { content: "▾"; margin-left: auto; color: var(--ry-purple); }
  .ry-facets[open] > summary::after { content: "▴"; }
  .ry-facets[open] { padding-bottom: 16px; }
  .ry-facets .ry-facet, .ry-facets .ry-facets-clear { margin-left: 18px; margin-right: 18px; }
  .ry-job-body { font-size: 16px; }
  .ry-btn { width: 100%; }
}

/* ---------- Cookie consent banner (assets/consent.js) ---------- */
.ry-consent { position: fixed; z-index: 1000; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin-left: auto;
  box-sizing: border-box; padding: 24px; border-radius: 16px; background: #fff; color: rgba(0, 0, 0, .85);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .25); font: 400 15px/1.5 "Montserrat", "Montserrat Placeholder", sans-serif; }
.ry-consent:focus { outline: none; }
.ry-consent h2 { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: #000; }
.ry-consent p { margin: 0 0 16px; }
.ry-consent a { color: #6648fe; }
.ry-consent-settings { display: grid; gap: 12px; margin: 0 0 16px; }
.ry-consent-settings[hidden] { display: none; }
.ry-consent-settings label { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: start; cursor: pointer; }
.ry-consent-settings input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: #6648fe; }
.ry-consent-settings span { grid-column: 2; font-size: 13px; color: rgba(0, 0, 0, .6); }
.ry-consent-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ry-consent-actions button, .ry-video-notice button { flex: 1 1 auto; min-height: 44px; padding: 0 16px; border-radius: 10px; cursor: pointer;
  font: 600 14px "Montserrat", sans-serif; border: 2px solid #6648fe; background: #fff; color: #6648fe; }
.ry-consent-actions .ry-consent-primary, .ry-video-notice button[data-v="play"] { background: #6648fe; color: #fff; }
.ry-consent-actions button:focus-visible, .ry-video-notice button:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.ry-consent-link [role="button"], .ry-consent-link[role="button"] { cursor: pointer; }
[data-ry-consent-open] { cursor: pointer; }
.ry-consent-cta { margin: 0 0 24px !important; font-size: 16px; }
.ry-consent-open-btn { min-height: 48px; padding: 0 24px; border: 0; border-radius: 10px; background: #6648fe; color: #fff;
  font: 600 15px "Montserrat", sans-serif; }
.ry-consent-open-btn:hover, .ry-consent-open-btn:focus-visible { background: #5235e8; outline: none; }

/* YouTube click-to-play notice */
.ry-video-notice { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 12px; padding: 16px; background: rgba(13, 27, 32, .88); color: #fff; text-align: center; font: 500 15px/1.4 "Montserrat", sans-serif; }
.ry-video-notice p { margin: 0; max-width: 420px; }
.ry-video-notice div { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* Office map in the footer, after the subscribe block and the page links (Google Maps embed, loaded
   after consent; notice reuses .ry-video-notice). Desktop footer (framer-v-wxynru) is a row: the map is
   a third equal column as tall as the subscribe block; tablet/phone stack it at full width. */
.ry-map { flex: none; width: 100%; display: flex; flex-direction: column; gap: 12px; font: 500 15px/1.4 "Montserrat", sans-serif; color: rgba(0, 0, 0, .85); }
.framer-v-wxynru .ry-map { flex: 1 0 0; width: 1px; height: 306px; }
.ry-map-frame { position: relative; height: 280px; border-radius: 12px; overflow: hidden; background: #e8eef5; }
.framer-v-wxynru .ry-map-frame { flex: 1; height: auto; }
.ry-map-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.ry-map-frame iframe[hidden] { display: none; }
.ry-map-address { margin: 0; }
.ry-map-directions { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 10px;
  background: #6648fe; color: #fff; font: 600 14px "Montserrat", sans-serif; text-decoration: none; }
.ry-map-directions:hover, .ry-map-directions:focus-visible { background: #5235e8; outline: none; }

/* ---------- Contact form ---------- */
.ry-captcha { margin: 4px 0 16px; min-height: 78px; }

.ry-form-status { margin: 12px 0 0; font: 500 14px/1.4 "Montserrat", sans-serif; }
.ry-form-status[data-state="ok"] { color: #1a7f37; }
.ry-form-status[data-state="error"] { color: #c62828; }

/* ---------- Type scale ----------
   One set of sizes across the site (desktop ≥1200 / tablet 810–1199 / phone ≤809). Framer sets every text
   size through --framer-font-size, so these rules override that variable on the exported text boxes. */
:root {
  --ry-title: 56px;      /* page title (H1) */
  --ry-hero: 56px;       /* home headline */
  --ry-band-title: 40px; /* title on the plain white header band (Find Jobs, Blog) */
  --ry-section: 40px;    /* section heading (H2) */
  --ry-article-title: 40px;
  --ry-content-h2: 28px; /* headings inside long text (articles, legal pages) */
  --ry-content-h3: 22px;
  --ry-content-h4: 18px;
  --ry-lead-h3: 28px;    /* About: large statement headings */
  --ry-card-h4: 24px;    /* About: mission / vision */
  --ry-small-h4: 22px;   /* About: values */
  --ry-body: 17px;       /* long text */
  --ry-intro: 16px;      /* subtitle under a band title */
  --ry-label: 14px;      /* form labels, never below this */
}
@media (min-width: 810px) and (max-width: 1199px) {
  :root { --ry-title: 44px; --ry-hero: 48px; --ry-band-title: 32px; --ry-section: 34px; --ry-article-title: 34px;
    --ry-content-h2: 26px; --ry-content-h3: 20px; --ry-content-h4: 17px; --ry-lead-h3: 24px; --ry-card-h4: 22px; --ry-small-h4: 20px; }
}
@media (max-width: 809px) {
  :root { --ry-title: 32px; --ry-hero: 40px; --ry-band-title: 28px; --ry-section: 28px; --ry-article-title: 28px;
    --ry-content-h2: 22px; --ry-content-h3: 18px; --ry-content-h4: 17px; --ry-lead-h3: 22px; --ry-card-h4: 20px; --ry-small-h4: 18px;
    --ry-body: 16px; --ry-intro: 15px; }
}

/* Page titles: Hire Talent, jobs list + job pages + Privacy (shared header), Terms, Cookie Policy, About, Contact */
:is(.framer-1u2nqbw, .framer-1102lkt, .framer-f5u7d7, .framer-qclus2, .framer-hiyu5j, .framer-gy5qg7) h1 {
  --framer-font-size: var(--ry-title) !important; --framer-line-height: 1.15em !important; }
.framer-9hnqfx h1 { --framer-font-size: var(--ry-hero) !important; }
:is(.framer-1o7zdn4, .framer-k4f47c) h1 { --framer-font-size: var(--ry-band-title) !important; }
:is(.framer-m79qdy, .framer-1h0qyrj) p { --framer-font-size: var(--ry-intro) !important; }

/* Section headings: home, Hire Talent, About */
:is(.framer-1wkebh3, .framer-13tpsmm, .framer-1bv9b6j, .framer-1lyczsz, .framer-1kridno, .framer-dmotmn,
    .framer-1humhw3, .framer-18y8k3x, .framer-gs6ttn, .framer-k7p7zd,
    .framer-1t9sybz, .framer-idx4fs, .framer-bd3oks, .framer-b6u7od) h2 {
  --framer-font-size: var(--ry-section) !important; --framer-line-height: 1.2em !important; }

/* Text that wraps onto several lines needs a line height above its size (Framer had some at 1:1 or less):
   About intro, home FAQ questions, Hire Talent service descriptions, footer column titles. */
.framer-1gtjmgx p { --framer-line-height: 1.5em !important; }
:is(.framer-1fsjlsc, .framer-1p6kh1, .framer-1dzqemg) p { --framer-line-height: 1.3em !important; }
.framer-q3wois p { --framer-line-height: 1.5em !important; }

/* About: statement headings, mission / vision, values */
:is(.framer-1q1vad, .framer-1pzxhib) h3 { --framer-font-size: var(--ry-lead-h3) !important; --framer-line-height: 1.35em !important; }
body:has(.framer-hiyu5j) h4[style*="--framer-font-size:28px"] { --framer-font-size: var(--ry-card-h4) !important; --framer-line-height: 1.35em !important; }
body:has(.framer-hiyu5j) h4[style*="--framer-font-size:24px"] { --framer-font-size: var(--ry-small-h4) !important; --framer-line-height: 1.35em !important; }

/* Long text: article bodies, Privacy (.framer-1k58ohx with headings, not the jobs intro), Terms, Cookie Policy */
.framer-1yiuwep h1 { --framer-font-size: var(--ry-article-title) !important; }
:is(.framer-b67ktd, .framer-1k58ohx:has(h2), .framer-1ein67h, .framer-nfo8t8) h2 { --framer-font-size: var(--ry-content-h2) !important; }
:is(.framer-b67ktd, .framer-1k58ohx:has(h2), .framer-1ein67h, .framer-nfo8t8) h3 { --framer-font-size: var(--ry-content-h3) !important; }
:is(.framer-b67ktd, .framer-1k58ohx:has(h2), .framer-1ein67h, .framer-nfo8t8) h4 { --framer-font-size: var(--ry-content-h4) !important; }
:is(.framer-b67ktd, .framer-1k58ohx:has(h2), .framer-1ein67h, .framer-nfo8t8) :is(p, li),
:is(.framer-b67ktd, .framer-1k58ohx:has(h2), .framer-1ein67h, .framer-nfo8t8) :is(p, li) :is(span, strong, em, a) {
  --framer-font-size: var(--ry-body) !important; --framer-line-height: 1.6em !important; }

/* Contact form labels and consent line */
.framer-1u439mm :is(p, label) { --framer-font-size: var(--ry-label) !important; }