/* ============================================================================
   Rohtek Data — homepage stylesheet
   Plain CSS3 port of the Next.js + MUI build. No framework, no build step.

   All selectors are prefixed `rd-` so the styles can drop into a WordPress
   theme or page builder without colliding with existing theme CSS.

   CONTENTS
     01  Font face
     02  Design tokens
     03  Reset & base
     04  Typography
     05  Layout — container, skip link
     06  Components — buttons, numerals, cards
     07  Header & mobile drawer
     08  Section — hero
     09  Section — intro
     10  Section — pioneers
     11  Section — audience
     12  Section — the rohtek factor
     13  Section — cta band
     14  Footer
     15  Motion preferences

   Breakpoints match the reference build (MUI defaults), mobile-first:
     600px  sm   ·  900px  md  ·  1200px  lg
   ========================================================================= */


/* 01  FONT FACE ----------------------------------------------------------- */
/* Self-hosted variable Manrope (400–700), latin subset only — 25KB, one file,
   no external request. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/manrope-latin-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}


/* 02  DESIGN TOKENS ------------------------------------------------------- */
:root {
  /* Colour */
  --rd-text-primary:  #151828;
  --rd-text-body:     #333333;
  --rd-text-on-dark:  #f2f2f2;
  --rd-blue:          #2f80ed;
  --rd-blue-hover:    #1f6fdb;
  --rd-teal:          #27c9a5;
  --rd-mint:          #82f1d7;
  --rd-surface:       #ffffff;
  --rd-surface-muted: #f4f7f7;
  --rd-surface-lav:   #f0f1ff;
  --rd-surface-slate: #485f8b;
  --rd-surface-ink:   #101827;
  --rd-border-ice:    #eaffff;

  /* Gradients */
  --rd-hero-text-gradient: linear-gradient(224.32deg, #388af5 21.51%, #1b62dd 79.69%);
  --rd-blue-text-gradient: linear-gradient(224.32deg, #388af5 21.51%, #1b62dd 79.69%);
  --rd-footer-background: #000000E5;
  --rd-cta-gradient:
    linear-gradient(224.32deg, #388AF5 21.51%, #1B62DD 79.69%);
  /* Four corner vignettes keeping type legible over the lab photograph. */
  --rd-lab-vignette:
    linear-gradient(121.117deg, rgba(0,0,0,.8) 1.277%, rgba(0,0,0,0) 42.22%),
    linear-gradient(301.117deg, rgba(0,0,0,.8) 1.277%, rgba(0,0,0,0) 42.22%),
    linear-gradient(31.117deg,  rgba(0,0,0,.8) 5.259%, rgba(0,0,0,0) 41.19%),
    linear-gradient(211.117deg, rgba(0,0,0,.8) 7.738%, rgba(0,0,0,0) 38.711%);

  /* Radii */
  --rd-radius-card: 12px;
  --rd-radius-media: 24px;
  --rd-radius-media-inset: 30px;
  --rd-radius-pill: 40px;

  /* Elevation */
  --rd-shadow-card: 0 1px 2px 0 rgba(0,0,0,.08);

  /* Layout — 1440 max with 120px gutters yields the 1200px design column. */
  --rd-container-max: 1440px;
  --rd-gutter: 20px;

  /* Vertical rhythm */
  --rd-section-top: 60px;
  --rd-gap-card: 20px;
}

@media (min-width: 600px)  { :root { --rd-gutter: 32px; } }
@media (min-width: 900px)  { :root { --rd-gutter: 48px; } }
/* Keep the Figma 1200px content canvas stable on common 1920px displays:
   150% Windows scale = 1280 CSS px and 125% = 1536 CSS px. The fluid gutter
   prevents the old 48px -> 120px jump from crushing grids at 1280px. */
@media (min-width: 1200px) {
  :root { --rd-gutter: clamp(40px, calc((100vw - 1200px) / 2), 120px); }
}


/* 03  RESET & BASE -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* A wide child must never scroll the whole page sideways. */
  overflow-x: clip;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--rd-surface);
  color: var(--rd-text-primary);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, figure { margin: 0; }

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

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--rd-blue);
  outline-offset: 2px;
  border-radius: 2px;
}


/* 04  TYPOGRAPHY ---------------------------------------------------------- */
/* The Figma file only contains the 1440 desktop frame, so every size below the
   1200px step is a derivation carried over from the reference build. */

.rd-display {
  font-size: 32px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -1.8px;
}
.rd-display__accent {
  background-image: var(--rd-hero-text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rd-h2 {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -1.2px;
}

.rd-lead {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.5px;
  color: var(--rd-text-primary);
}

.rd-body {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--rd-text-body);
}

/* Card headings — 18/20px beside media, 16px beside a numeral or swatch. */
.rd-card__title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.2px;
}
.rd-info-card__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.2px;
}

.rd-accent-blue { color: var(--rd-blue); }
.rd-accent-mint { color: var(--rd-mint); }

@media (min-width: 600px) {
  .rd-display { font-size: 38px; }
  .rd-h2      { font-size: 32px; }
  .rd-lead    { font-size: 20px; }
}
@media (min-width: 900px) {
  .rd-display { font-size: 44px; }
  .rd-h2      { font-size: 36px; }
  .rd-lead    { font-size: 22px; }
  .rd-body    { font-size: 16px; line-height: 26px; }
}
@media (min-width: 1200px) {
  .rd-display      { font-size: 56px; }
  .rd-h2           { font-size: 44px; }
  .rd-lead         { font-size: 24px; }
  .rd-card__title  { font-size: 20px; }
}


/* 05  LAYOUT -------------------------------------------------------------- */
.rd-container {
  width: 100%;
  max-width: var(--rd-container-max);
  margin-inline: auto;
  padding-inline: var(--rd-gutter);
}

/* Grid/flex children must be allowed to shrink instead of forcing overflow at
   OS-scaled and browser-zoomed viewport widths. */
.rd-intro__grid > *,
.rd-pioneers__grid > *,
.rd-grid-4 > *,
.rd-grid-5 > *,
.rd-cta__inner > *,
.rd-footer__row > * {
  min-width: 0;
}

.rd-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--rd-surface-ink);
  color: var(--rd-text-on-dark);
  font-size: 14px;
  font-weight: 600;
}
.rd-skip-link:focus { left: 0; }

.rd-logo { display: inline-flex; flex-shrink: 0; }


/* 06  COMPONENTS ---------------------------------------------------------- */

/* Buttons — the Figma "Website action button" (Primary / Secondary, plus the
   outlined treatment the header uses over the dark hero). */
.rd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--rd-radius-pill);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.rd-btn__arrow { font-size: 16px; line-height: 1; }

.rd-btn--primary {
  background: var(--rd-blue);
  border-color: var(--rd-blue);
  color: var(--rd-text-on-dark);
}
.rd-btn--primary:hover { background: var(--rd-blue-hover); border-color: var(--rd-blue-hover); }

.rd-btn--secondary {
  background: var(--rd-surface);
  border-color: var(--rd-blue);
  color: var(--rd-blue);
}
.rd-btn--secondary:hover { background: var(--rd-surface-lav); }

.rd-btn--on-dark {
  background: transparent;
  border-color: var(--rd-blue);
  color: var(--rd-text-on-dark);
}
.rd-btn--on-dark:hover { background: rgba(47,128,237,.16); }

/* Section numerals */
.rd-num {
  display: block;
  flex-shrink: 0;
  font-size: 44px;
  font-weight: 600;
  line-height: 52px;
  letter-spacing: -1.2px;
}
.rd-num--teal {
  background-image: var(--rd-blue-text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: #1b62dd;
  -webkit-text-fill-color: transparent;
}
.rd-num--grey  { color: var(--rd-text-body); }
.rd-num--white { color: #fff; }

/* Four-up card grid, collapsing 4 → 2 → 1. */
.rd-grid-4,
.rd-grid-5 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rd-gap-card);
}
@media (min-width: 600px)  { .rd-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .rd-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }  .rd-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Card with a leading mark beside its title — shared by the audience band and
   the Rohtek Factor row (identical geometry in Figma, different surfaces).
   Figma pins the body at y=99; a 60px minimum header row plus a 20px gap lands
   on the same offset while letting a wrapped title push the body down. */
.rd-info-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  padding: 19px;
  border: 1px solid var(--rd-border-ice);
  border-radius: var(--rd-radius-card);
}
.rd-info-card__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 60px;
}
.rd-info-card--ink {
  background: var(--rd-surface-ink);
  color: var(--rd-text-on-dark);
}
.rd-info-card--ink .rd-body,
.rd-info-card--ink .rd-info-card__title { color: var(--rd-text-on-dark); }
.rd-info-card--lavender {
  background: var(--rd-surface-lav);
  color: var(--rd-text-primary);
}

/* The 60px blue gradient square in the audience cards. */
.rd-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: var(--rd-radius-card);
  background: var(--rd-blue-text-gradient);
}
.rd-swatch img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  /* Keep the pictograms white inside the blue gradient tiles,
     even when Astra or a page plugin applies a global image filter. */
  filter: brightness(0) invert(1);
}


/* 07  HEADER & DRAWER ----------------------------------------------------- */
.rd-header {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 10;
  height: 76px;
}
.rd-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
}

.rd-header__nav { display: none; }
@media (min-width: 900px) {
  .rd-header__nav { display: flex; align-items: center; gap: 40px; }
}

.rd-nav { display: flex; }
.rd-nav__link {
  padding: 8px 12px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -.176px;
  color: var(--rd-text-on-dark);
  transition: opacity 150ms ease;
}

/* Also cover older header markup when only the stylesheet is deployed. */
.rd-about-page .rd-nav a[href*="/about"],
.rd-about-page .rd-drawer__nav a[href*="/about"],
.rd-services-page .rd-nav a[href*="/services"],
.rd-services-page .rd-nav a[href*="/genomic-data-services"],
.rd-services-page .rd-drawer__nav a[href*="/services"],
.rd-services-page .rd-drawer__nav a[href*="/genomic-data-services"],
.rd-nav a[aria-current="page"],
.rd-drawer__nav a[aria-current="page"],
.rd-nav .current-menu-item > a {
  color: #388af5;
  background-image: var(--rd-blue-text-gradient);
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: bottom;
  opacity: 1;
}

/* Gradient text for both WordPress and fallback navigation links. */
body .rd-header .rd-nav a:hover,
body .rd-header .rd-nav a:focus-visible,
body .rd-drawer .rd-drawer__nav a:not(.rd-btn):hover,
body .rd-drawer .rd-drawer__nav a:not(.rd-btn):focus-visible {
  background-image: var(--rd-blue-text-gradient);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 1;
}

/* White brand artwork sits directly on the header and footer backgrounds. */
.rd-logo img[src*="rohtek-data-logo-white-v2.svg"] {
  width: 169px;
  height: auto;
  padding: 0;
  background: transparent;
  border-radius: 0;
}
.rd-footer .rd-logo img[src*="rohtek-data-logo-white-v2.svg"] { width: 169px; }

/* Burger */
.rd-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--rd-text-on-dark);
  cursor: pointer;
}
@media (min-width: 900px) { .rd-burger { display: none; } }

.rd-burger__bars,
.rd-burger__bars::before,
.rd-burger__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.rd-burger__bars { position: relative; }
.rd-burger__bars::before,
.rd-burger__bars::after { content: ''; position: absolute; left: 0; }
.rd-burger__bars::before { top: -6px; }
.rd-burger__bars::after  { top: 6px; }

/* Drawer */
.rd-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0,0,0,.5);
  opacity: 0;
  transition: opacity 225ms ease;
}
.rd-backdrop.is-open { opacity: 1; }

.rd-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 50;
  width: 280px;
  max-width: 85vw;
  height: 100%;
  padding: 24px;
  background: var(--rd-surface-ink);
  transform: translateX(100%);
  transition: transform 225ms ease;
}
.rd-drawer.is-open { transform: translateX(0); }
.rd-drawer[hidden], .rd-backdrop[hidden] { display: none; }

.rd-drawer__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--rd-text-on-dark);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.rd-drawer__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 48px;
}
.rd-nav__link--drawer { padding-inline: 0; font-size: 16px; }
.rd-drawer__cta { margin-top: 16px; }


/* 08  HERO ---------------------------------------------------------------- */
.rd-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 560px;
  background: var(--rd-surface-ink);
  color: var(--rd-text-on-dark);
}
.rd-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rd-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  max-width: 860px;
  padding-block: 112px 48px;
}
/* Preserve the four editorial lines in the homepage Figma reference. */
.rd-hero .rd-display {
  margin: 0;
  font-family: 'Manrope', sans-serif;
  font-size: clamp(28px, 6.25vw, 72px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--rd-text-on-dark);
}
.rd-hero__line {
  display: block;
  overflow-wrap: anywhere;
}
.rd-hero .rd-display__accent {
  color: #1b62dd;
  background-image: none;
}
@media (min-width: 600px)  { .rd-hero { min-height: 620px; } }
@media (min-width: 900px)  { .rd-hero { min-height: 700px; } }
@media (min-width: 1200px) {
  .rd-hero { min-height: 786px; }
  /* Figma nudges the block 24px above the optical centre. */
  .rd-hero__content { gap: 46px; margin-top: -48px; }
}

@media (max-width: 899px) {
  .rd-hero { min-height: clamp(460px, 75vw, 620px); }
  .rd-hero > .rd-container { width: 100%; min-width: 0; }
  .rd-hero__content { max-width: 100%; padding-block: 112px 56px; }
  .rd-hero__bg { z-index: -2; object-position: 60% center; }
  .rd-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(5, 12, 28, .78), rgba(5, 12, 28, .2));
  }
}


/* 09  INTRO --------------------------------------------------------------- */
.rd-intro { padding-top: var(--rd-section-top); padding-bottom: 40px; }

.rd-rule {
  display: block;
  width: 86px;
  height: 4px;
  margin-bottom: 20px;
  background: var(--rd-blue-text-gradient);
}

.rd-intro__grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 24px;
  align-items: start;
}
.rd-intro__response {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.rd-intro__tagline {
  color: var(--rd-text-primary);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.25px;
}
@media (min-width: 900px) {
  /* Figma: a 595px problem statement beside a 498px response. */
  .rd-intro__grid {
    grid-template-columns: minmax(0, 595fr) minmax(0, 498fr);
    column-gap: 54px;
  }
  .rd-intro__response { gap: 34px; }
}

.rd-intro__tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rd-gap-card);
  margin-top: 40px;
}
@media (min-width: 600px) { .rd-intro__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.rd-tile {
  height: 185px;
  border-radius: var(--rd-radius-card);
  overflow: hidden;
  border: 0;
  box-shadow: none;
}
/* Clip the thin edge baked into the supplied PNGs inside the rounded tile. */
.rd-tile img {
  display: block;
  width: calc(100% + 6px);
  max-width: none;
  height: calc(100% + 6px);
  margin: -3px;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}


/* 10  PIONEERS ------------------------------------------------------------ */
.rd-pioneers {
  padding-top: var(--rd-section-top);
  padding-bottom: 60px;
  background: var(--rd-surface-muted);
}
@media (min-width: 1200px) { .rd-pioneers { padding-bottom: 110px; } }

.rd-pioneers__heading { max-width: 504px; }

.rd-pioneers__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rd-gap-card);
  margin-top: 40px;
}
@media (min-width: 1200px) {
  .rd-pioneers__grid {
    /* A 504px image tile beside a 655px stack of two cards. */
    grid-template-columns: minmax(0, 504fr) minmax(0, 655fr);
    margin-top: 60px;
  }
}

/* Tall image tile: numeral top-left, copy resting on the bottom edge. */
.rd-media-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 420px;
  padding: 20px;
  border-radius: var(--rd-radius-card);
  overflow: hidden;
  box-shadow: var(--rd-shadow-card);
  color: var(--rd-text-on-dark);
}
.rd-media-card__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Two scrims: a light wash over the tile, then a bottom ramp carrying the text. */
.rd-media-card__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to top, rgba(0,0,0,.3) 3.365%, rgba(0,0,0,.06) 48.278%),
    linear-gradient(to bottom, rgba(0,0,0,0) 44.282%, rgba(0,0,0,.8) 84.615%);
}
.rd-media-card__body { display: flex; flex-direction: column; gap: 10px; }
.rd-media-card .rd-body { color: var(--rd-text-on-dark); }
@media (min-width: 900px)  { .rd-media-card { min-height: 520px; } }
@media (min-width: 1200px) { .rd-media-card { min-height: 604px; } }

.rd-pioneers__stack { display: flex; flex-direction: column; gap: var(--rd-gap-card); }

.rd-pioneer-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: var(--rd-radius-card);
  box-shadow: var(--rd-shadow-card);
}
.rd-pioneer-card--white    { background: var(--rd-surface); }
.rd-pioneer-card--lavender { background: var(--rd-surface-lav); }
.rd-pioneer-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding-top: 40px;
}

/* Wide slate banner: artwork left, copy right; stacked below md. */
.rd-banner {
  display: flex;
  flex-direction: column;
  margin-top: var(--rd-gap-card);
  border-radius: var(--rd-radius-card);
  overflow: hidden;
  box-shadow: var(--rd-shadow-card);
  background: #1B62DD;
  color: var(--rd-text-on-dark);
}
.rd-banner__media {
  position: relative;
  min-height: 180px;
  overflow: hidden;
}
.rd-banner__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rd-banner__media .rd-num { position: absolute; top: 20px; left: 20px; }
.rd-banner__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 24px 20px;
}
.rd-banner .rd-body { color: var(--rd-text-on-dark); }
@media (min-width: 900px) {
  .rd-banner { flex-direction: row; align-items: stretch; }
  .rd-banner__media {
    /* 734 / 1200 in Figma. Only the inner edge is rounded. */
    flex: 0 0 61.2%;
    min-height: 176px;
    border-start-end-radius: var(--rd-radius-media-inset);
    border-end-end-radius: var(--rd-radius-media-inset);
  }
  .rd-banner__body { padding: 20px; }
}


/* 11  AUDIENCE ------------------------------------------------------------ */
.rd-audience {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: var(--rd-section-top);
  background: var(--rd-surface-ink);
  color: var(--rd-text-on-dark);
}
.rd-audience__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rd-audience__vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--rd-lab-vignette);
}
.rd-audience__heading { max-width: 615px; }
.rd-audience__cards { margin-top: 48px; }
@media (min-width: 1200px) {
  .rd-audience { min-height: 855px; }
  .rd-audience__cards { margin-top: 0; }
}


/* 12  THE ROHTEK FACTOR --------------------------------------------------- */
.rd-factor { padding-top: var(--rd-section-top); padding-bottom: 60px; }
@media (min-width: 1200px) { .rd-factor { padding-bottom: 61px; } }

.rd-factor__media {
  position: relative;
  margin-top: 40px;
  /* 1200 x 471 in Figma, held as a ratio so it scales cleanly. */
  aspect-ratio: 1200 / 471;
  border-radius: var(--rd-radius-media);
  overflow: hidden;
  box-shadow: var(--rd-shadow-card);
}
.rd-factor__media img { width: 100%; height: 100%; object-fit: cover; }
.rd-factor__cards { margin-top: var(--rd-gap-card); }


/* 13  CTA BAND ------------------------------------------------------------ */
.rd-cta {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 185px;
  padding-block: 36px;
  background-image: var(--rd-cta-gradient);
  color: #fff;
}
.rd-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
}
.rd-cta__heading { max-width: 650px; }
.rd-cta__button {
  flex: 0 0 auto;
  border-color: #fff;
  color: var(--rd-blue);
}
@media (min-width: 600px) {
  .rd-cta__inner {
    flex-direction: row;
    align-items: center;
  }
}
@media (min-width: 1200px) {
  .rd-cta { min-height: 185px; padding-block: 0; }
  .rd-cta__inner { min-height: 185px; }
}


/* 14  FOOTER -------------------------------------------------------------- */
.rd-footer {
  padding-top: 24px;
  padding-bottom: 10px;
  background: var(--rd-footer-background);
  color: #fff;
}
.rd-footer__row {
  display: flex;
  flex-direction: column;
  row-gap: 32px;
  column-gap: 24px;
}
.rd-footer__col { flex-shrink: 0; }
.rd-footer__col--brand { display: flex; flex-direction: column; gap: 20px; }
.rd-footer__col--links,
.rd-footer__col--email { display: flex; flex-direction: column; gap: 8px; }
.rd-footer__col--legal { display: flex; flex-direction: column; }
.rd-footer__col--totop { display: flex; align-items: flex-end; }

.rd-footer__tagline {
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  color: #fff;
}
.rd-footer__label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .56px;
  color: #fff;
}
.rd-footer__label--dense {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .4px;
  text-transform: uppercase;
  opacity: 1;
}
.rd-footer__link {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  transition: color 150ms ease;
}
.rd-footer__link:hover,
.rd-footer__link:focus-visible {
  background-image: var(--rd-blue-text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.rd-footer__link--plain { font-weight: 400; }

.rd-to-top {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: opacity 150ms ease;
}
.rd-to-top:hover { opacity: .85; }

.rd-footer__copyright {
  margin-top: 24px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  color: #F0F0F0;
}

@media (min-width: 600px) {
  /* Figma lays the five columns out with space-between across the 1200px row;
     fixed column widths preserve that distribution. */
  .rd-footer__row { flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
  .rd-footer__col--brand { width: 294px; max-width: 100%; }
  .rd-footer__col--links { width: 166px; }
  .rd-footer__col--legal { width: 149px; }
  .rd-footer__col--email { width: 186px; }
  .rd-footer__col--totop { width: 163px; justify-content: flex-end; }
}


/* 15  MOTION PREFERENCES -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}