/* ---- tokens.css ---- */
/* ============================================================
   Redis Technologies — Design Tokens
   ------------------------------------------------------------
   Source of truth for colour, from the live site
   https://redistechnologies.com (computed styles read 2026-11-02).
   Owner instruction: keep the existing colour theme.

   Every hex below was read out of the live site's computed styles
   or its CSS rules — none are invented. The `--rt-logo-*` values
   come from the supplied brand PNGs (pixel-sampled).

   Contrast ratios in the comments are WCAG 2.1 against the noted
   background, computed with the standard relative-luminance formula.
   ============================================================ */

:root {
  /* --- Core brand ------------------------------------------------ */
  --rt-navy-900: #010630;      /* deep navy: dark sections, footer, dark UI   */
  --rt-indigo-800: #101e8a;    /* royal indigo: top of the dark section glow  */
  --rt-blue-500: #3c52ff;      /* primary accent: buttons, links (5.46:1 on #fff) */
  --rt-blue-600: #394ef0;      /* pressed / hover state for the primary accent */
  --rt-amber-500: #ffa319;     /* secondary accent: icons, small marks (9.82:1 on navy) */

  /* --- Neutrals (light surfaces) -------------------------------- */
  --rt-white: #ffffff;
  --rt-surface: #f9f9fb;      /* alternating off-white section background    */
  --rt-border: #e3e5ef;       /* hairlines and card borders                  */
  --rt-lavender-050: #e1e4ff;  /* pale lavender chip / tag background        */

  /* --- Text ----------------------------------------------------- */
  --rt-ink: #111111;           /* headings on light                          */
  --rt-ink-body: #535866;      /* body copy on light (7.11:1 on #fff)        */
  --rt-mist: #878b99;          /* secondary text on navy (5.78:1) and the
                                  de-emphasised half of dark hero headings    */
  --rt-ink-muted: #686d7b;     /* secondary text on light (5.17:1 on #fff,
                                  4.83:1 on the tinted surface). Use this,
                                  never --rt-mist, above a light surface.  */
  /* --rt-mist reaches only 3.4:1 on white: it is a dark-surface colour.
     Anything on a light background uses --rt-ink-muted instead.          */
  --rt-on-dark: #ffffff;
  --rt-on-dark-muted: rgba(255, 255, 255, 0.84);

  /* --- Signature gradient --------------------------------------- */
  --rt-dark-glow: radial-gradient(at 50% 0%, var(--rt-indigo-800) 0%, var(--rt-navy-900) 65%);

  /* --- Logo (sampled from the supplied PNGs) -------------------- */
  --rt-logo-blue: #4d6fff;     /* the mark's blue, 4.7:1 on navy, 4.17:1 on white */
  /* NOTE: the logo mark blue (#4d6fff) is lighter than the site accent
     (#3c52ff). Both are in the theme; the mark keeps its own value.   */

  /* --- Type ----------------------------------------------------- */
  --rt-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  Helvetica, Arial, sans-serif;
}


/* ---- base.css ---- */
/* ==========================================================================
   Redis Technologies — base layer
   Reset,
typography,
layout primitives. Loaded after tokens.css.
   ========================================================================== */

@font-face{
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-var-latin.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;
}

:root{
  /* fluid type scale — 1.25 ratio at desktop, compressed on phones */
  --step--2: clamp(0.6875rem, 0.66rem + 0.14vw, 0.75rem);
  --step--1: clamp(0.8125rem, 0.78rem + 0.16vw, 0.875rem);
  --step-0: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --step-1: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --step-2: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-3: clamp(1.5rem, 1.3rem + 1vw, 2.125rem);
  --step-4: clamp(1.875rem, 1.5rem + 1.9vw, 3rem);
  --step-5: clamp(2.25rem, 1.6rem + 3.2vw, 4rem);

  --gutter: clamp(20px, 4.5vw, 40px);
  --container: 1200px;
  --container-narrow: 760px;
  --section-y: clamp(40px, 4.6vw, 68px);   /* tightened: was 64/8vw/116 */

  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --header-h: 76px;

  --shadow-card: 0 1px 2px rgba(1, 6, 48, 0.04), 0 12px 32px -12px rgba(1, 6, 48, 0.14);
  --shadow-lift: 0 2px 4px rgba(1, 6, 48, 0.06), 0 22px 44px -16px rgba(1, 6, 48, 0.22);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body{
  margin: 0;
  background: var(--rt-white);
  color: var(--rt-ink-body);
  font-family: var(--rt-font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  font-feature-settings: "cv11" 1, "ss01" 1; /* Inter: single-storey a, tighter shapes */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked{ overflow: hidden; }

h1,
h2,
h3,
h4{
  color: var(--rt-ink);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1{ font-size: var(--step-5); letter-spacing: -0.032em; line-height: 1.04; }
h2{ font-size: var(--step-4); letter-spacing: -0.028em; }
h3{ font-size: var(--step-2); line-height: 1.25; letter-spacing: -0.02em; }
h4{ font-size: var(--step-1); line-height: 1.35; letter-spacing: -0.015em; }

p{ margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child{ margin-bottom: 0; }

a{
  color: var(--rt-blue-500);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover{ text-decoration-color: currentColor; }

strong{ font-weight: 600; color: var(--rt-ink); }

ul,
ol{ margin: 0 0 1.1em; padding-left: 1.15em; }
li{ margin-bottom: 0.45em; }
li::marker{ color: var(--rt-blue-500); }

img,
svg,
picture{ display: block; max-width: 100%; }
img{ height: auto; }

button{ font: inherit; color: inherit; }

:focus-visible{
  outline: 2px solid var(--rt-blue-500);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-dark :focus-visible,
.section--dark :focus-visible,
.site-footer :focus-visible,
.site-header :focus-visible{
  outline-color: #ffffff;
}

::selection{ background: rgba(60, 82, 255, 0.16); color: var(--rt-ink); }

hr{
  border: 0;
  border-top: 1px solid var(--rt-border);
  margin: 2rem 0;
}

/* --- layout primitives -------------------------------------------------- */

.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow{ max-width: var(--container-narrow); }

.section{ padding-block: var(--section-y); position: relative; }
.section--tight{ padding-block: clamp(30px, 3.2vw, 48px); }
.section--tint{ background: var(--rt-surface); }
.section--hairline{ border-top: 1px solid var(--rt-border); }

.section--dark{
  background-color: var(--rt-navy-900);
  background-image: var(--rt-dark-glow);
  color: rgba(255, 255, 255, 0.78);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark strong{ color: #ffffff; }
.section--dark a{ color: #ffffff; }

@media (max-width: 560px) {
  }
.on-dark .eyebrow,
.section--dark 
.lede{
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--rt-ink-body);
  max-width: 62ch;
}
.section--dark .lede{ color: rgba(255, 255, 255, 0.76); }

.text-muted{ color: var(--rt-ink-muted); }
.measure{ max-width: 62ch; }


.skip-link{
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--rt-white);
  color: var(--rt-navy-900);
  font-weight: 600;
  font-size: var(--step--1);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
  transform: translateY(-200%);
  transition: transform 160ms var(--ease);
}
.skip-link:focus-visible{ transform: translateY(0); outline-offset: 2px; }

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


/* ---- components.css ---- */
/* ==========================================================================
   Redis Technologies — components
   Header,
navigation,
buttons,
hero,
lifecycle rail,
cards,
lists,
angled CTA band,
footer,
contact form.
   ========================================================================== */

/* --- buttons ------------------------------------------------------------ */

.btn{
  --btn-bg: var(--rt-blue-500);
  --btn-fg: #ffffff;
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 26px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease),
              border-color 180ms var(--ease), transform 180ms var(--ease),
              box-shadow 180ms var(--ease);
}
.btn:hover{ box-shadow: 0 10px 24px -12px rgba(60, 82, 255, 0.7); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }

.btn--primary:hover{ --btn-bg: var(--rt-blue-600); }

.btn--ghost{
  --btn-bg: transparent;
  --btn-fg: var(--rt-ink);
  --btn-bd: var(--rt-border);
}
.btn--ghost:hover{
  --btn-bd: var(--rt-navy-900);
  --btn-bg: var(--rt-white);
  box-shadow: none;
}

.btn--on-dark{
  --btn-bg: transparent;
  --btn-fg: #ffffff;
  --btn-bd: rgba(255, 255, 255, 0.28);
}
.btn--on-dark:hover{
  --btn-bg: rgba(255, 255, 255, 0.1);
  --btn-bd: rgba(255, 255, 255, 0.55);
  box-shadow: none;
}

.btn--lg{ min-height: 58px; padding-inline: 32px; font-size: var(--step-0); }
.btn--sm{ min-height: 44px; padding: 10px 20px; }

.btn__arrow{
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform 180ms var(--ease);
}
.btn:hover .btn__arrow{ transform: translateX(3px); }

.link-arrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--rt-blue-500);
  text-decoration: none;
}
.link-arrow svg{ width: 15px; height: 15px; transition: transform 180ms var(--ease); }
.link-arrow:hover svg{ transform: translateX(3px); }
.link-arrow:hover{ text-decoration: underline; }
.section--dark .link-arrow{ color: #ffffff; }

/* --- header ------------------------------------------------------------- */

.site-header{
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color 220ms var(--ease), border-color 220ms var(--ease),
              box-shadow 220ms var(--ease);
  border-bottom: 1px solid transparent;
  color: #ffffff;
}
.site-header__inner{
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-header.is-scrolled,
.site-header.is-open{
  background: rgba(1, 6, 48, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(255, 255, 255, 0.09);
}

.brand{
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
  padding: 6px 0;
}
.brand img{ width: 186px; height: auto; }
.brand--light img{ width: 168px; }

.nav{ margin-left: auto; }
.nav__list{
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.6vw, 20px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link{
  position: relative;
  display: inline-block;
  padding: 10px 12px;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: -0.008em;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color 160ms var(--ease);
}
.nav__link::after{
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms var(--ease);
}
.nav__link:hover{ color: #ffffff; }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after{ transform: scaleX(1); }
.nav__link[aria-current="page"]{ color: #ffffff; font-weight: 600; }

.header__cta{ flex: none; margin-left: 8px; }

.nav-toggle{
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-left: auto;
  padding: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  cursor: pointer;
  color: #ffffff;
}
.nav-toggle__bars{ position: relative; width: 18px; height: 12px; }
.nav-toggle__bars span{
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.75px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 220ms var(--ease), opacity 160ms var(--ease);
}
.nav-toggle__bars span:nth-child(1){ top: 0; }
.nav-toggle__bars span:nth-child(2){ top: 5px; }
.nav-toggle__bars span:nth-child(3){ top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){ transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav-toggle{ display: inline-flex; }
  .header__cta{ display: none; }
  .nav{
    position: fixed;
    inset: var(--header-h) 0 auto;
    margin: 0;
    background: var(--rt-navy-900);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px var(--gutter) 30px;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    display: none;
  }
  .nav.is-open{ display: block; }
  .nav__list{ flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li{ border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .nav__list li:last-child{ border-bottom: 0; }
  .nav__link{
    display: block;
    padding: 16px 4px;
    font-size: var(--step-1);
    font-weight: 500;
  }
  .nav__link::after{ display: none; }
  .nav__link[aria-current="page"]{ color: #9fb0ff; }
  .nav__cta{ margin-top: 20px; }
  .nav__cta .btn{ width: 100%; }
}

.nav__cta{ display: none; }
@media (max-width: 940px) { .nav__cta{ display: block; } }

/* --- hero --------------------------------------------------------------- */

.hero{
  position: relative;
  padding-top: calc(var(--header-h) + clamp(30px, 4.2vw, 58px));
  padding-bottom: clamp(38px, 4.6vw, 64px);
  background-color: var(--rt-navy-900);
  background-image: var(--rt-dark-glow);
  color: rgba(255, 255, 255, 0.78);
  overflow: hidden;
}
.hero h1,
.hero h2{ color: #ffffff; }
.hero__grid{
  display: grid;
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 900px) {
  .hero__grid{ grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
  .hero__grid--text{ grid-template-columns: minmax(0, 1fr); }
}

.hero__title{ margin-bottom: 22px; }
.hero__title .dim{ color: #8f9ac4; }
.hero__sub{
  font-size: var(--step-1);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.76);
  max-width: 54ch;
  margin-bottom: 32px;
}
.hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.hero--page{ padding-bottom: clamp(44px, 6vw, 72px); }
.hero--page .hero__title{ max-width: 20ch; }
.hero--page .hero__sub{ max-width: 58ch; }

.hero__meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--step--1);
  color: rgba(255, 255, 255, 0.6);
}
.hero__meta a{ color: rgba(255, 255, 255, 0.86); text-decoration: none; font-weight: 500; }
.hero__meta a:hover{ text-decoration: underline; }
.hero__meta span{ display: inline-flex; align-items: center; gap: 8px; }

/* --- lifecycle rail ----------------------------------------------------- */

.lifecycle{ margin-top: clamp(40px, 5vw, 64px); }
.lifecycle__track{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px clamp(16px, 2.4vw, 32px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.lifecycle__stage{
  margin: 0;
  padding: 0;
}

.lifecycle__stage.is-active .lifecycle__label{ color: var(--rt-amber-500); }
.lifecycle__label{
  display: block;
  color: #ffffff;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.lifecycle__note{
  display: block;
  margin-top: 4px;
  font-size: var(--step--2);
  color: rgba(255, 255, 255, 0.54);
  line-height: 1.45;
}

@media (max-width: 760px) {
  .lifecycle__track{
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 12px;
    scrollbar-width: thin;
  }
  .lifecycle__stage{ scroll-snap-align: start; }
}

.lifecycle-legend{
  margin-top: 14px;
  font-size: var(--step--1);
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- section headers ---------------------------------------------------- */

.section-head{ max-width: 760px; margin-bottom: clamp(22px, 2.6vw, 36px); }
.section-head--split{
  display: grid;
  gap: 20px 48px;
  max-width: none;
  align-items: end;
}
@media (min-width: 860px) {
  .section-head--split{ grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .section-head--split .section-head__aside{ margin-bottom: 6px; }
}
.section-head h2{ margin-bottom: 14px; }
.section-head__aside p{ font-size: var(--step-0); color: var(--rt-ink-body); }

/* --- service cards (home) ---------------------------------------------- */

.service-cards{
  display: grid;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 700px) { .service-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.service-card{
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: clamp(24px, 3vw, 34px);
  background: var(--rt-white);
  border: 1px solid var(--rt-border);
  border-radius: var(--radius-lg);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease),
              transform 200ms var(--ease);
}
.service-card__foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 18px;
}
.service-card__meta{
  font-size: var(--step--2);
  letter-spacing: 0.02em;
  color: var(--rt-ink-muted);
}
.service-card h3{ margin-bottom: 10px; font-size: var(--step-2); }
.service-card p{ font-size: var(--step-0); margin-bottom: 22px; }
.service-card__list{
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  font-size: var(--step--1);
  color: var(--rt-ink-body);
}
.service-card__list li{
  margin-bottom: 6px;
}
.service-card .link-arrow{ margin-top: auto; }
.service-card:hover{
  border-color: rgba(60, 82, 255, 0.32);
  transform: translateY(-2px);
}
.service-card:focus-within{ border-color: var(--rt-blue-500); }

/* whole-card link target */
.service-card__title-link{ text-decoration: none; color: inherit; }
.service-card__title-link::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* --- service rows (services index) ------------------------------------- */

.service-row{
  display: grid;
  gap: clamp(24px, 4vw, 56px);
  padding-block: clamp(36px, 4.5vw, 60px);
  border-top: 1px solid var(--rt-border);
  align-items: start;
}
@media (min-width: 900px) {
  .service-row{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}
.service-row:last-child{ border-bottom: 1px solid var(--rt-border); }
.service-row__title{ margin-bottom: 12px; font-size: var(--step-3); }
.service-row__kicker{
  font-size: var(--step-1);
  color: var(--rt-ink-muted);
  margin-bottom: 14px;
}
.service-row__body p{ font-size: var(--step-0); }
.service-row__aside{
  background: var(--rt-surface);
  border-radius: var(--radius);
  padding: 24px 26px;
}
.service-row__aside-title{
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rt-ink-muted);
  margin-bottom: 14px;
}
.service-row__aside ul{ margin: 0; padding-left: 0; list-style: none; }
.service-row__aside li{
  font-size: var(--step--1);
  margin-bottom: 9px;
}

/* --- problem list ------------------------------------------------------- */

.problem-list{
  display: grid;
  gap: 0 clamp(24px, 4vw, 56px);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: problem;
}
@media (min-width: 800px) { .problem-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.problem-list li{
  margin: 0;
  padding: 20px 0;
  border-top: 1px solid var(--rt-border);
  font-size: var(--step-0);
}
.problem-list strong{ display: block; color: var(--rt-ink); margin-bottom: 3px; }

/* --- step list ---------------------------------------------------------- */

.steps{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  counter-reset: step;
}
@media (min-width: 800px) { .steps{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.steps li{
  margin: 0;
  padding-top: 6px;
}
.steps h3{ font-size: var(--step-1); margin-bottom: 6px; }
.steps p{ font-size: var(--step--1); margin: 0; }

/* --- industry list ------------------------------------------------------ */

.industry-list{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rt-border);
}
.industry-list li{ margin: 0; }
.industry-link{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 24px;
  padding: clamp(20px, 2.6vw, 28px) 4px;
  border-bottom: 1px solid var(--rt-border);
  text-decoration: none;
  color: inherit;
  transition: padding-left 220ms var(--ease), background-color 220ms var(--ease);
}
.industry-link__name{
  grid-column: 1;
  grid-row: 1;
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--rt-ink);
  letter-spacing: -0.02em;
  transition: color 180ms var(--ease);
}
.industry-link__desc{
  grid-column: 1;
  grid-row: 2;
  font-size: var(--step--1);
  color: var(--rt-ink-body);
  max-width: 58ch;
}
.industry-link__arrow{
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--rt-border);
  display: grid;
  place-items: center;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease),
              color 200ms var(--ease);
}
.industry-link__arrow svg{ width: 14px; height: 14px; }
.industry-link:hover{ background: var(--rt-surface); padding-left: 12px; }
.industry-link:hover .industry-link__name{ color: var(--rt-blue-500); }
.industry-link:hover .industry-link__arrow{
  background: var(--rt-blue-500);
  border-color: var(--rt-blue-500);
  color: #ffffff;
}

/* --- dark band with angled top edge ------------------------------------ */

.cta-band{
  --angle: 84px;
  position: relative;
  isolation: isolate;
  padding-block: calc(var(--angle) + clamp(26px, 2.6vw, 42px)) clamp(44px, 4.6vw, 64px);
  color: rgba(255, 255, 255, 0.78);
}
.cta-band__bg{
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--rt-navy-900);
  background-image: var(--rt-dark-glow);
  clip-path: polygon(0 var(--angle), 100% 0, 100% 100%, 0 100%);
}
@media (max-width: 700px) { .cta-band{ --angle: 44px; } }

.cta-band h2{ color: #ffffff; max-width: 26ch; margin-bottom: 0; }
.cta-band__body{
  margin: 14px 0 0;
  font-size: var(--step-1);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  max-width: 46ch;
}
.cta-band__inner{
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: end;
}
@media (min-width: 860px) {
  .cta-band__inner{ grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  .cta-band__actions{ align-items: flex-start; }
}
.cta-band__actions{
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

/* --- footer ------------------------------------------------------------- */

.site-footer{
  background: var(--rt-navy-900);
  color: rgba(255, 255, 255, 0.62);
  padding-block: clamp(48px, 6vw, 72px) 28px;
  font-size: var(--step--1);
}
.site-footer__grid{
  display: grid;
  gap: clamp(32px, 4vw, 48px);
  padding-bottom: clamp(36px, 4vw, 52px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
@media (min-width: 760px) {
  .site-footer__grid{ grid-template-columns: 1.4fr 1fr 1fr 1.1fr; }
}
.site-footer .brand img{ width: 176px; }
.site-footer__blurb{
  margin-top: 18px;
  max-width: 34ch;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
}
.site-footer__heading{
  color: #ffffff;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.site-footer ul{ list-style: none; margin: 0; padding: 0; }
.site-footer li{ margin-bottom: 4px; }
.site-footer a{
  /* 24px minimum hit area at every width, not just touch */
  display: inline-block;
  padding: 4px 0;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}
.site-footer a:hover{ color: #ffffff; text-decoration: underline; }
.site-footer__contact a{ font-weight: 500; color: #ffffff; }
.site-footer__bottom{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 24px;
  font-size: var(--step--2);
  color: rgba(255, 255, 255, 0.48);
}
.site-footer__social{
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.site-footer__social a{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
  color: #ffffff;
  transition: background-color 180ms var(--ease), border-color 180ms var(--ease);
}
.site-footer__social a:hover{ background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.4); }
.site-footer__social svg{ width: 16px; height: 16px; }

/* --- prose blocks ------------------------------------------------------- */

.prose h2{ font-size: var(--step-3); margin-top: 2.2em; }
.prose h2:first-child{ margin-top: 0; }
.prose h3{ font-size: var(--step-1); margin-top: 1.8em; }
.prose p,
.prose li{ font-size: var(--step-0); }
.prose > *{ max-width: 68ch; }

.split{
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
@media (min-width: 860px) {
  .split--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--sidebar{ grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .split--media{ grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); align-items: center; }
}

/* --- panel / aside card ------------------------------------------------- */

.panel{
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--radius);
  border: 1px solid var(--rt-border);
  background: var(--rt-white);
}
.panel--tint{ background: var(--rt-surface); border-color: transparent; }
.panel h3{ font-size: var(--step-1); margin-bottom: 12px; }
.panel ul{ margin-bottom: 0; }

.panel__label{
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rt-ink-muted);
  margin-bottom: 12px;
  display: block;
}

/* --- photo slot (clearly labeled placeholder) -------------------------- */

.photo-slot{
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    linear-gradient(150deg, #16205e 0%, #0a1140 55%, #050a2b 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  text-align: center;
}
.photo-slot::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(at 70% 10%, rgba(60, 82, 255, 0.35), transparent 60%);
  pointer-events: none;
}
.photo-slot__inner{
  position: relative;
  z-index: 1;
  padding: 24px;
  max-width: 32ch;
}
.photo-slot__mark{ width: 54px; height: 54px; margin: 0 auto 16px; opacity: 0.9; }
.photo-slot__title{
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 6px;
}
.photo-slot__note{
  display: block;
  font-size: var(--step--2);
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.5;
}
.photo-slot img{ width: 100%; height: 100%; object-fit: cover; }
.photo-slot img.photo-slot__mark{
  width: 54px;
  height: 54px;
  object-fit: contain;
  opacity: 0.92;
  margin: 0 auto 16px;
}
.photo-slot--has-image{ border-color: var(--rt-border); aspect-ratio: auto; }
.photo-slot--has-image::after{ display: none; }

.photo-slot--wide{ aspect-ratio: 16 / 9; }
.photo-slot--tall{ aspect-ratio: 3 / 4; }

/* --- breadcrumbs -------------------------------------------------------- */

.breadcrumbs{
  font-size: var(--step--2);
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 22px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.breadcrumbs li{ margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.breadcrumbs li + li::before{ content: "/"; color: rgba(255, 255, 255, 0.28); }
.breadcrumbs a{ color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.breadcrumbs a:hover{ color: #ffffff; text-decoration: underline; }
.breadcrumbs [aria-current="page"]{ color: rgba(255, 255, 255, 0.92); }

/* --- cross-link cards --------------------------------------------------- */

.related{
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 720px) { .related{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.related li{ margin: 0; }
.related__link{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border: 1px solid var(--rt-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--rt-ink);
  font-weight: 600;
  font-size: var(--step--1);
  transition: border-color 180ms var(--ease), background-color 180ms var(--ease);
}
.related__link span{ position: relative; z-index: 1; }
.related__link svg{ width: 15px; height: 15px; color: var(--rt-blue-500); flex: none; }
.related__link:hover{ border-color: rgba(60, 82, 255, 0.4); background: var(--rt-surface); }

/* --- contact form ------------------------------------------------------- */

.contact-form{ margin-top: 8px; }
.form-grid{
  display: grid;
  gap: 18px 20px;
}
@media (min-width: 680px) {
  .form-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid__full{ grid-column: 1 / -1; }
}
.field{ display: flex; flex-direction: column; gap: 7px; }
.field label{
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--rt-ink);
  letter-spacing: -0.005em;
}
.field__optional{ font-weight: 400; color: var(--rt-ink-muted); }
.req{ color: var(--rt-blue-500); margin-left: 1px; font-weight: 600; }
.field input,
.field select,
.field textarea{
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  font-size: var(--step-0);
  color: var(--rt-ink);
  background: var(--rt-white);
  border: 1px solid #d5d9e6;
  border-radius: var(--radius-sm);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field textarea{ min-height: 148px; resize: vertical; }
.field select{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none' stroke='%23535866' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}
.field input:hover,
.field select:hover,
.field textarea:hover{ border-color: #b9bfd2; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline: 2px solid var(--rt-blue-500);
  outline-offset: 1px;
  border-color: var(--rt-blue-500);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{
  border-color: #c8203a;
  box-shadow: 0 0 0 1px #c8203a;
}
.field__error{
  font-size: var(--step--2);
  color: #b3142b;
  font-weight: 500;
  min-height: 0;
}
.field__hint{ font-size: var(--step--2); color: var(--rt-ink-muted); margin: 0; }

.form-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 24px;
}
.form-actions .btn{ min-width: 190px; }
.form-actions .btn[disabled]{ opacity: 0.72; cursor: progress; }
.form-privacy{ font-size: var(--step--2); color: var(--rt-ink-muted); max-width: 34ch; margin: 0; }

.form-status{
  display: none;
  margin-top: 22px;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  line-height: 1.5;
  border: 1px solid transparent;
}
.form-status.is-visible{ display: block; }
.form-status--success{
  background: #edf6ef;
  border-color: #9dc9a8;
  color: #1c4a28;
}
.form-status--error{
  background: #fdf0f1;
  border-color: #e3a3ac;
  color: #8c1122;
}
.form-status:focus{ outline: 2px solid var(--rt-blue-500); outline-offset: 2px; }

.hp-field{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- contact detail tiles ---------------------------------------------- */

.contact-details{
  display: grid;
  gap: 1px;
  background: var(--rt-border);
  border: 1px solid var(--rt-border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0;
}
@media (min-width: 640px) { .contact-details{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contact-details > div{ background: var(--rt-white); padding: 22px 24px; }
.contact-details dt{
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rt-ink-muted);
  margin-bottom: 8px;
}
.contact-details dd{ margin: 0; font-size: var(--step-0); color: var(--rt-ink); }
.contact-details dd a{ color: var(--rt-ink); text-decoration: none; font-weight: 500; }
.contact-details dd a:hover{ color: var(--rt-blue-500); text-decoration: underline; }

/* --- misc -------------------------------------------------------------- */

.reveal{ opacity: 0; transform: translateY(14px); }
.reveal.is-in{ opacity: 1; transform: none; transition: opacity 520ms var(--ease), transform 520ms var(--ease); }
@media (prefers-reduced-motion: reduce) { .reveal{ opacity: 1; transform: none; } }

@media (min-width: 700px) { }

/* --- Cloudflare Turnstile ------------------------------------------------ */
.turnstile-field {
  margin: 6px 0 4px;
}
.turnstile-field .cf-turnstile {
  min-height: 65px;
}
.turnstile-field .field__hint {
  margin-top: 6px;
}

/* --- photo slots holding a real photograph ------------------------------- */
.photo-slot picture {
  display: block;
  width: 100%;
  height: 100%;
}
.photo-slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.svc-photo {
  margin: 0 0 clamp(28px, 3.4vw, 48px);
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
  overflow: hidden;
}


/* ---- pages.css ---- */
/* ==========================================================================
   Redis Technologies — page-level composition
   ========================================================================== */

/* --- home --------------------------------------------------------------- */

.home-hero{ padding-bottom: clamp(34px, 4vw, 52px); }
.home-hero .hero__title{
  font-size: clamp(2.2rem, 3.9vw, 3.5rem);
  max-width: 21ch;
}
.home-hero__aside{ position: relative; }

@media (min-width: 900px) {
  .home-hero .hero__grid{ align-items: center; }
}

/* headline emphasis: one phrase in the muted navy lilac,
matching the
   existing brand voice,
without a gradient */
.home-hero .hero__title em{
  font-style: normal;
  color: #8f9ac4;
}

/* "what we do" summary strip under the hero,
on white */
.intro-strip{
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (min-width: 900px) {
  .intro-strip{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.intro-strip__lead{
  font-size: var(--step-2);
  line-height: 1.38;
  color: var(--rt-ink);
  letter-spacing: -0.018em;
  margin: 0;
}
.intro-strip__secondary p{ font-size: var(--step-0); }

/* lifecycle explainer — dark inset block */
.lifecycle-panel{
  border-radius: var(--radius-lg);
  background-color: var(--rt-navy-900);
  background-image: var(--rt-dark-glow);
  color: rgba(255, 255, 255, 0.78);
  padding: clamp(28px, 4vw, 48px);
  margin-top: clamp(32px, 4vw, 48px);
}
.lifecycle-panel h3{ color: #ffffff; font-size: var(--step-2); margin-bottom: 8px; }
.lifecycle-panel p{ font-size: var(--step--1); max-width: 60ch; }
.lifecycle-panel .lifecycle{ margin-top: 28px; }

/* --- services index ---------------------------------------------------- */

.services-intro{ max-width: 720px; }

.service-detail__meta{
  display: grid;
  gap: 1px;
  background: var(--rt-border);
  border: 1px solid var(--rt-border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0;
}
@media (min-width: 700px) { .service-detail__meta{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.service-detail__meta > div{ background: var(--rt-white); padding: 20px 22px; }
.service-detail__meta dt{
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rt-ink-muted);
  margin-bottom: 6px;
}
.service-detail__meta dd{
  margin: 0;
  font-size: var(--step--1);
  color: var(--rt-ink);
  font-weight: 500;
  line-height: 1.4;
}

.checklist{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0 clamp(24px, 4vw, 48px);
}
@media (min-width: 720px) { .checklist{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.checklist li{
  position: relative;
  margin: 0;
  padding: 15px 0;
  border-bottom: 1px solid var(--rt-border);
  font-size: var(--step--1);
  color: var(--rt-ink-body);
}
.checklist strong{ color: var(--rt-ink); }

/* --- industry pages ---------------------------------------------------- */

.industry-hero__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}
.tag{
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.86);
  white-space: nowrap;
}

.need-list{
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: need;
}
.need-list li{
  position: relative;
  margin: 0;
  padding: 24px 0 24px 56px;
  border-top: 1px solid var(--rt-border);
}
.need-list li:last-child{ border-bottom: 1px solid var(--rt-border); }
.need-list h3{ font-size: var(--step-1); margin-bottom: 6px; }
.need-list p{ font-size: var(--step-0); margin: 0; max-width: 64ch; }

.mapping{
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mapping li{
  margin: 0;
  padding: 18px 20px;
  background: var(--rt-white);
  border: 1px solid var(--rt-border);
  border-radius: var(--radius-sm);
}
.mapping__service{
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--rt-ink);
  margin-bottom: 4px;
}
.mapping__why{
  display: block;
  font-size: var(--step--1);
  color: var(--rt-ink-body);
  line-height: 1.5;
}

/* --- about ------------------------------------------------------------- */

.principle-list{
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 780px) { .principle-list{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.principle-list li{
  margin: 0;
}
.principle-list h3{ font-size: var(--step-1); margin-bottom: 8px; }
.principle-list p{ font-size: var(--step--1); margin: 0; }

.timeline{
  list-style: none;
  margin: 0;
  padding: 0;
}
.timeline li{ margin: 0 0 22px; }
.timeline li:last-child{ margin-bottom: 0; }
.timeline h3{ font-size: var(--step-1); margin-bottom: 4px; }
.timeline p{ font-size: var(--step--1); margin: 0; }

/* --- contact ----------------------------------------------------------- */

.contact-grid{
  display: grid;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
@media (min-width: 900px) {
  .contact-grid{ grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); }
}
.contact-card{
  background: var(--rt-white);
  border: 1px solid var(--rt-border);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3.4vw, 44px);
}
.contact-aside{ display: grid; gap: 20px; }
.contact-aside__block{
  padding: 24px 26px;
  border-radius: var(--radius);
  background: var(--rt-surface);
}
.contact-aside__block h2{ font-size: var(--step-1); margin-bottom: 8px; }
.contact-aside__block p{ font-size: var(--step--1); margin-bottom: 0; }
.contact-aside__block a{ font-weight: 500; }
.contact-aside__block--dark{
  background: var(--rt-navy-900);
  background-image: var(--rt-dark-glow);
  color: rgba(255, 255, 255, 0.76);
}
.contact-aside__block--dark h2{ color: #ffffff; }
.contact-aside__block--dark a{ color: #ffffff; }

.contact-list{
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--step--1);
}
.contact-list li{
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(1, 6, 48, 0.08);
  margin: 0;
}
.contact-list li:last-child{ border-bottom: 0; padding-bottom: 0; }
.contact-list li:first-child{ padding-top: 0; }
.contact-list__label{ color: var(--rt-ink-muted); flex: none; min-width: 96px; }
.contact-list__value{ color: var(--rt-ink); font-weight: 500; }

/* --- 404 --------------------------------------------------------------- */

.error-page{ padding-block: clamp(56px, 8vw, 104px); text-align: left; }
.error-page__code{
  font-size: clamp(72px, 14vw, 148px);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.14);
  margin: 0 0 8px;
}
.error-page h1{ font-size: var(--step-4); max-width: 24ch; }
.error-page p{ max-width: 52ch; }
.error-page__links{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 28px;
  padding: 0;
  list-style: none;
}
.error-page__links li{ margin: 0; }

/* --- print ------------------------------------------------------------- */

@media print{
  .site-header, .cta-band, .site-footer, .skip-link, .photo-slot { display: none !important; }
  body { color: #000; background: #fff; }
  .hero { background: #fff !important; color: #000 !important; padding-top: 0; }
  .hero h1, .hero__title, .hero__sub { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* --- contact page: form only, no aside column ---------------------------- */
.contact-solo {
  max-width: 780px;
}
.contact-solo .contact-card {
  padding: clamp(26px, 3.4vw, 44px);
}


/* ---- careers.css ---- */
/* ==========================================================================
   IT Staffing + Careers + admin (scope added 2026-11-02)
   ========================================================================== */

/* --- preview / status notices ------------------------------------------- */

.preview-note{
  margin: 18px 0 0;
  padding: 14px 16px;
  border: 1px dashed rgba(60, 82, 255, 0.45);
  border-radius: var(--radius-sm);
  background: rgba(60, 82, 255, 0.05);
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--rt-ink-body);
  max-width: 72ch;
}
.preview-note__tag{
  display: inline-block;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rt-blue-500);
  margin-right: 6px;
}

.notice{
  margin: 0 0 24px;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rt-border);
  background: var(--rt-surface);
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--rt-ink-body);
}
.notice strong{ color: var(--rt-ink); }
.notice code{
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-size: 0.92em;
  background: rgba(1, 6, 48, 0.06);
  padding: 1px 5px;
  border-radius: 3px;
}
.notice--warn{
  background: #fff8ec;
  border-color: #e8c48a;
  color: #5c4415;
}
.notice--warn strong{ color: #3f2d09; }
.notice--warn a{ color: #6a4a12; }
.notice--ok{
  background: #eff7f1;
  border-color: #a9cfb4;
  color: #234a2d;
}
.notice--closed{
  background: #f4f5f9;
  border-color: #cfd4e2;
  color: #3a3f4f;
}

.pill{
  display: inline-block;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: 10px;
}
.pill--sample{ background: #fff1d6; color: #7a5410; }
.pill--closed{ background: #eef0f5; color: #4a505f; }

/* --- staffing page ------------------------------------------------------- */

.spec-grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
@media (min-width: 760px) { .spec-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.spec-card{
  margin: 0;
  padding: 24px 26px;
  border: 1px solid var(--rt-border);
  border-radius: var(--radius);
  background: var(--rt-white);
}
.spec-card h3{ font-size: var(--step-1); margin-bottom: 8px; }
.spec-card p{ font-size: var(--step--1); margin: 0; }

.pending-block{
  margin-top: 8px;
  padding: 20px 22px;
  border: 1px dashed rgba(60, 82, 255, 0.4);
  border-radius: var(--radius);
  background: rgba(60, 82, 255, 0.04);
}
.pending-block__note{
  font-size: var(--step--1);
  color: var(--rt-ink-body);
  margin-bottom: 14px;
}
.checklist--pending li{ color: var(--rt-ink-muted); }
.checklist--pending li::before{ border-color: var(--rt-ink-muted); }

.careers-teaser{
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  align-items: end;
}
@media (min-width: 780px) { .careers-teaser{ grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); } }
.careers-teaser__actions{ display: flex; flex-wrap: wrap; gap: 12px; }

.site-footer__contact-list{
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  font-size: var(--step--1);
}
.site-footer__contact-list li{ margin-bottom: 6px; }
.site-footer__contact-list a{ color: #ffffff; font-weight: 500; text-decoration: none; }
.site-footer__contact-list a:hover{ text-decoration: underline; }

/* --- careers filters ----------------------------------------------------- */

.filters{
  display: grid;
  gap: 14px 16px;
  align-items: end;
  padding: 20px 22px;
  border: 1px solid var(--rt-border);
  border-radius: var(--radius);
  background: var(--rt-white);
}
@media (min-width: 720px) { .filters{ grid-template-columns: repeat(4, minmax(0, 1fr)) auto; } }
.filters__field{ display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.filters__field label{
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rt-ink-muted);
}
.filters__field select,
.filters__field input{
  width: 100%;
  padding: 11px 14px;
  font: inherit;
  font-size: var(--step--1);
  color: var(--rt-ink);
  background: var(--rt-white);
  border: 1px solid #d5d9e6;
  border-radius: var(--radius-sm);
  -webkit-appearance: none;
  appearance: none;
}
.filters__field select{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none' stroke='%23535866' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.filters__field select:focus,
.filters__field input:focus{
  outline: 2px solid var(--rt-blue-500);
  outline-offset: 1px;
  border-color: var(--rt-blue-500);
}
.filters__actions{ display: flex; gap: 8px; }
.filters__count{
  margin: 14px 2px 0;
  font-size: var(--step--1);
  color: var(--rt-ink-muted);
}

/* --- job list ------------------------------------------------------------ */

.job-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.job-card{
  display: grid;
  gap: 18px;
  margin: 0;
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid var(--rt-border);
  border-radius: var(--radius);
  background: var(--rt-white);
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
@media (min-width: 780px) {
  .job-card{ grid-template-columns: minmax(0, 1fr) 210px; align-items: start; }
}
.job-card:hover{ border-color: rgba(60, 82, 255, 0.35); box-shadow: var(--shadow-card); }
.job-card.is-closed{ opacity: 0.78; }
.job-card__top{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 8px;
}
.job-card__title{ font-size: var(--step-2); margin: 0; }
.job-card__title a{ color: var(--rt-ink); text-decoration: none; }
.job-card__title a:hover{ color: var(--rt-blue-500); text-decoration: underline; }
.job-card__ref{
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-size: var(--step--2);
  color: var(--rt-ink-muted);
  letter-spacing: 0.04em;
}
.job-card__summary{ font-size: var(--step--1); margin: 0 0 14px; max-width: 70ch; }
.job-card__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--step--2);
  color: var(--rt-ink-body);
}
.job-card__meta li{ margin: 0; display: flex; flex-direction: column; gap: 2px; }
.job-card__meta-label{
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rt-ink-muted);
}
.job-card__side{
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
@media (min-width: 780px) { .job-card__side{ align-items: flex-end; text-align: right; } }
.job-card__dates{
  font-size: var(--step--2);
  color: var(--rt-ink-muted);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* --- empty state --------------------------------------------------------- */

.empty-state{
  padding: clamp(28px, 5vw, 56px) clamp(24px, 4vw, 48px);
  border: 1px dashed var(--rt-border);
  border-radius: var(--radius-lg);
  background: var(--rt-surface);
  max-width: 760px;
}
.empty-state h2{ font-size: var(--step-3); margin-bottom: 10px; }
.empty-state p{ max-width: 56ch; }
.empty-state__actions{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* --- job detail ---------------------------------------------------------- */

.job-detail h3{ margin-top: 1.6em; }
.job-detail ul{ margin-bottom: 1.2em; }

/* ==========================================================================
   Admin
   ========================================================================== */

.admin{ background: var(--rt-surface); }
.admin__main{ padding-top: calc(var(--header-h) + 32px); padding-bottom: 64px; }
.admin__brand{ color: #fff; font-size: var(--step--1); font-weight: 600; }
.admin__brand b{
  color: #9fb0ff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10.5px;
  margin-left: 8px;
}
.admin__nav{ margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--step--1); }
.admin__nav a{ color: rgba(255, 255, 255, 0.82); text-decoration: none; font-weight: 500; }
.admin__nav a:hover{ color: #fff; text-decoration: underline; }
.admin__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 0 18px;
}
.admin__title{ font-size: var(--step-3); margin: 0; }
.admin__stats{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 0 0 22px;
  font-size: var(--step--1);
  color: var(--rt-ink-body);
}
.admin__muted{ color: var(--rt-ink-muted); font-size: var(--step--2); }
.admin__table-wrap{
  overflow-x: auto;
  border: 1px solid var(--rt-border);
  border-radius: var(--radius);
  background: var(--rt-white);
}
.admin__table{ width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.admin__table th,
.admin__table td{
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--rt-border);
  vertical-align: top;
}
.admin__table th{
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rt-ink-muted);
  background: var(--rt-surface);
  white-space: nowrap;
}
.admin__table tr:last-child td{ border-bottom: 0; }
.admin__table code{ font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; font-size: 0.92em; }
.admin__actions form{ display: flex; gap: 6px; align-items: center; }
.admin__actions select{
  font-size: var(--step--2);
  padding: 7px 9px;
  border: 1px solid #d5d9e6;
  border-radius: var(--radius-sm);
  background: #fff;
}
.admin__message{ max-width: 34ch; color: var(--rt-ink-body); font-size: var(--step--2); }
.admin__view{ font-size: var(--step--2); color: var(--rt-blue-500); }
.admin__form{
  background: var(--rt-white);
  border: 1px solid var(--rt-border);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 32px);
}
.admin__form--narrow{ max-width: 420px; }
.admin__fieldset{ border: 0; padding: 0; margin: 0 0 26px; }
.admin__fieldset legend{
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rt-ink-muted);
  margin-bottom: 14px;
  padding: 0;
}
.admin__code{
  margin: 10px 0 0;
  padding: 10px 12px;
  background: rgba(1, 6, 48, 0.06);
  border-radius: var(--radius-sm);
  font-size: 12px;
  overflow-x: auto;
}
.form-grid--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 680px) { .form-grid--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.admin__danger{
  margin-top: 32px;
  padding: 20px 22px;
  border: 1px solid #e8c48a;
  background: #fff8ec;
  border-radius: var(--radius);
  font-size: var(--step--1);
}
.admin__danger h2{ font-size: var(--step-1); margin-bottom: 6px; }
.admin__danger form{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.admin__footer{ padding: 18px 0 32px; font-size: var(--step--2); color: var(--rt-ink-muted); }

.status{
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: #eef0f5;
  color: #4a505f;
  white-space: nowrap;
}
.status--published{ background: #e6f5ec; color: #1d5a33; }
.status--closed{ background: #fdf0f1; color: #8c1122; }
.status--expired{ background: #fdf0f1; color: #8c1122; }
.status--archived{ background: #ece9f5; color: #4b3d6b; }
.status--sample{ background: #fff1d6; color: #7a5410; }

/* Fifth service card (IT Staffing) spans the grid on wide screens so the
   home page does not end on an orphaned half-row. */
@media (min-width: 700px){
  .service-card--wide {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 8px clamp(24px, 4vw, 56px);
    align-items: start;
  }
  .service-card--wide .service-card__top { grid-column: 1 / -1; }
  .service-card--wide h3 { grid-column: 1; }
  .service-card--wide p { grid-column: 1; }
  .service-card--wide .service-card__list { grid-column: 2; margin-top: 0; }
  .service-card--wide .link-arrow { grid-column: 1; }
}

/* --- service page blocks (each page has a different mix) ------------------ */

.svc-intro{ max-width: 68ch; margin-bottom: clamp(32px, 4vw, 52px); }
.svc-intro .lede{ margin-bottom: 18px; }
.svc-intro p:last-child{ color: var(--rt-ink-body); }

.svc-block{
  max-width: 1060px;
  padding-top: clamp(24px, 3vw, 36px);
  margin-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--rt-border);
}
.svc-block h2{ font-size: var(--step-3); margin-bottom: 18px; max-width: 30ch; }
.svc-block p{ max-width: 66ch; }
.svc-block p + p{ margin-top: 14px; }

.svc-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px 40px;
  max-width: 900px;
}
@media (min-width: 720px) { .svc-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.svc-columns .svc-list{ grid-template-columns: minmax(0, 1fr); }
.svc-list li{
  margin: 0;
  font-size: var(--step--1);
  color: var(--rt-ink-body);
}

.svc-columns{
  display: grid;
  gap: clamp(24px, 4vw, 56px);
  max-width: 1000px;
}
@media (min-width: 760px) { .svc-columns{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.svc-columns h3{
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rt-ink-muted);
  margin-bottom: 12px;
}

.svc-dl{
  margin: 0;
  max-width: 900px;
  border-top: 1px solid var(--rt-border);
}
.svc-dl > div{
  display: grid;
  gap: 4px 32px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rt-border);
}
@media (min-width: 700px) {
  .svc-dl > div{ grid-template-columns: 240px minmax(0, 1fr); align-items: baseline; }
}
.svc-dl dt{
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--rt-ink);
}
.svc-dl dd{
  margin: 0;
  font-size: var(--step--1);
  color: var(--rt-ink-body);
}

.hero__meta-line{
  margin: 22px 0 0;
  font-size: var(--step--1);
  color: rgba(255, 255, 255, 0.62);
}
.related-title{
  font-size: var(--step-2);
  margin-bottom: 18px;
}

/* --- staffing roles: the two headline roles, then the wider list ---------- */

.role-primary {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
  margin-bottom: clamp(28px, 4vw, 44px);
}
@media (min-width: 760px) { .role-primary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.role-primary > div {
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--rt-border);
  border-radius: var(--radius);
  background: var(--rt-white);
}
.role-primary h3 {
  font-size: var(--step-2);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.role-primary p { font-size: var(--step--1); margin: 0; max-width: 54ch; }

.role-other h3 {
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--rt-ink);
  margin-bottom: 14px;
}
.role-other ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rt-border);
}
.role-other li {
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--rt-border);
  font-size: var(--step--1);
  color: var(--rt-ink-body);
  max-width: 80ch;
}
.role-other strong {
  display: block;
  color: var(--rt-ink);
  font-weight: 600;
  margin-bottom: 5px;
}

/* Specialization line above a job title: information, not a label. */
.job-spec {
  font-size: var(--step--1);
  color: var(--rt-blue-400);
  margin-bottom: 12px;
}


/* ---- mobile.css ---- */
/* Mobile refinements, loaded last so they win against component rules.

   The fluid type scale bottoms out under 16px on a phone: hard to read, and iOS
   Safari zooms the whole page whenever a focused field is smaller than that.
   These rules set a readable floor, give links a real tap area, and stop the
   five-stage strip from scrolling sideways on a narrow screen.
   ------------------------------------------------------------------------- */

@media (max-width: 940px) {
  /* A focused field under 16px makes iOS zoom the page, which then sits
     off-centre until the user pinches back. The floor is enforced over the
     component rules rather than alongside them, because those set the size
     through the type scale and would otherwise win on specificity. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select:not([multiple]),
  textarea {
    font-size: 16px !important;
  }

  /* tablets are touch too: give footer links a real hit area */
  .site-footer li { margin-bottom: 0; }
  .site-footer a {
    display: inline-block;
    padding: 11px 0;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 560px) {
  :root {
    --step--2: 0.8125rem;
    --step--1: 0.875rem;
    --step-0: 1rem;
  }
  body { font-size: 1rem; }
  h1 { line-height: 1.08; }

  /* footer links were 16px line boxes with no padding */
  .site-footer__bottom { font-size: 0.8125rem; }
  .site-footer__social a { min-height: 44px; min-width: 44px; }

  .breadcrumbs a { display: inline-block; padding-block: 10px; }
  .breadcrumbs { font-size: 0.8125rem; }
  .link-arrow { padding-block: 6px; }

  /* five 150px columns forced a sideways scroll to read a short sequence */
  .lifecycle__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    padding-bottom: 0;
    gap: 18px 16px;
  }
  .lifecycle__stage { scroll-snap-align: none; }
  .photo-slot--wide { aspect-ratio: 16 / 10; }
}

@media (hover: none) and (pointer: coarse) {
  .site-footer a { min-height: 44px; display: inline-flex; align-items: center; }
  .btn, .header__cta .btn { min-height: 48px; }
}