/* =============================================================
   Celyxa, Inc. — design system (LIGHT)
   -------------------------------------------------------------
   Palette is sampled from the logo mark: the orange "C" plus the
   teal / indigo / coral ribbon.

   On a light ground the brand orange (2.6:1) and teal (2.8:1) are
   far too weak to use as text, so each has a darkened "-ink"
   variant for type and keeps the bright value for fills only.

   The header uses logo-ink.png (navy wordmark). The footer stays
   dark and keeps the original logo.png (light wordmark).

   Type: Newsreader (display serif) + Inter (UI / body).
   NOTE: "Share" and "Squada One" are still loaded in the page head
   purely for the embedded React contact form. Drop those two
   families once the widget is restyled.
   ============================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand — bright values are for fills and decoration */
  --brand: #f5821f; /* orange "C" */
  --brand-600: #d96f12;
  --brand-ink: #a85a0b; /* orange as TEXT on light — 5.1:1 */
  --teal: #34a8bd; /* ribbon */
  --teal-ink: #0e7185; /* teal as TEXT on light — 5.7:1 */
  --indigo: #5566b8; /* ribbon */
  --indigo-ink: #414f96;
  --coral: #e08a76; /* ribbon */

  /* Surfaces */
  --paper: #ffffff; /* page */
  --paper-soft: #f4f8fb; /* alternating section */
  --paper-2: #e9f0f7; /* wells / hovers */
  --card: #ffffff;

  /* Text */
  --ink: #12233d; /* headings — 16:1 */
  --body: #47576e; /* body copy — 7.3:1 */
  --muted: #5d6d84; /* captions — 5.3:1 */

  /* Lines */
  --line: rgba(18, 35, 61, 0.11);
  --line-2: rgba(18, 35, 61, 0.2);

  /* Dark footer */
  --footer-bg: #0d1626;
  --footer-text: #b7c4d6;
  --footer-muted: #8697ad;

  /* Effects — a light theme needs real shadows to build depth */
  --shadow-sm: 0 1px 2px rgba(18, 35, 61, 0.06);
  --shadow: 0 4px 12px rgba(18, 35, 61, 0.07), 0 1px 3px rgba(18, 35, 61, 0.06);
  --shadow-md:
    0 12px 28px rgba(18, 35, 61, 0.1), 0 3px 8px rgba(18, 35, 61, 0.06);
  --shadow-lg:
    0 24px 56px rgba(18, 35, 61, 0.14), 0 6px 16px rgba(18, 35, 61, 0.07);
  --ring: 0 0 0 3px rgba(52, 168, 189, 0.5);
  --grad-brand: linear-gradient(135deg, var(--teal), var(--indigo));

  /* Geometry */
  --maxw: 1180px;
  --maxw-text: 720px;
  --header-h: 78px;
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --pad-section: clamp(72px, 9vw, 118px);
  --gutter: clamp(20px, 4vw, 32px);

  /* Type */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial,
    sans-serif;
}

/* ---------- 2. Reset / base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

button {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-optical-sizing: auto;
  color: var(--ink);
  line-height: 1.14;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0 0 0.5em;
}

p {
  text-wrap: pretty;
}

[id] {
  scroll-margin-top: calc(var(--header-h) + 24px);
}

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 4px;
}

::selection {
  background: rgba(245, 130, 31, 0.24);
  color: var(--ink);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus {
  left: 0;
}

/* ---------- 3. Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: var(--pad-section) 0;
  position: relative;
}

.section--soft {
  background: var(--paper-soft);
  border-block: 1px solid var(--line);
}

/* A section whose content is grouped into one raised card. Used on the
   solution pages to bind an overview and its feature rows into a single
   object instead of letting them float on the page. The card is the
   .container itself, so only the section's class changes. */
.section--card > .container {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 4vw, 62px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  /* Faint brand wash keeps a large white panel from reading as a plain
     box against the white page. */
  background:
    radial-gradient(
      78% 58% at 100% 0%,
      rgba(52, 168, 189, 0.07),
      transparent 60%
    ),
    radial-gradient(
      68% 58% at 0% 100%,
      rgba(85, 102, 184, 0.06),
      transparent 62%
    ),
    var(--card);
}
/* Same gradient hairline the service cards use, for family resemblance */
.section--card > .container::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--grad-brand);
}
/* The card supplies its own breathing room, so the last row sits flush */
.section--card .feature-row:last-child {
  margin-bottom: 0;
}

.section__head {
  text-align: left;
  margin-bottom: 6vw;
}
.section__head h2 {
  font-size: clamp(32px, 4.4vw, 50px);
  margin-bottom: 16px;
}
.section__head h3 {
  font-size: clamp(26px, 3vw, 38px);
}
/* :not(.eyebrow) keeps this from out-specifying the .eyebrow rule */
.section__head p:not(.eyebrow) {
  color: var(--body);
  font-size: clamp(16px, 1.5vw, 18.5px);
  margin: 0 auto;
}
/* Section heads can carry a second paragraph, which needs separating */
.section__head p:not(.eyebrow) + p:not(.eyebrow) {
  margin-top: 18px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-ink);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-brand);
}
.section__head .eyebrow::after {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--indigo), var(--teal));
}

.rule-label {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-ink);
  margin-bottom: clamp(32px, 4vw, 52px);
}
.rule-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-2), transparent);
}

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 14px 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease;
}
.btn:active {
  transform: translateY(1px);
}

/* Dark text on orange — white on orange is only 2.6:1 */
.btn--primary {
  background: var(--brand);
  color: #1a1206;
  box-shadow: 0 6px 18px rgba(245, 130, 31, 0.3);
}
.btn--primary:hover {
  background: var(--brand-600);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(217, 111, 18, 0.36);
}

.btn--ghost {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line-2);
  box-shadow: var(--shadow-sm);
}
.btn--ghost:hover {
  border-color: var(--teal);
  color: var(--teal-ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* ---------- 5. Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
.site-header.is-stuck {
  background: rgba(255, 255, 255, 0.95);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand {
  display: flex;
  align-items: center;
  flex: none;
}
.brand img {
  height: 36px;
  width: auto;
  transition: opacity 0.18s ease;
}
.brand:hover img {
  opacity: 0.75;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
}
/* The CTA is a button, so it is excluded from plain-link styling
   rather than being clawed back with overrides. */
.nav a:not(.nav__cta),
.nav__link {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--body);
  padding: 6px 0;
  position: relative;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.16s ease;
}
.nav a:not(.nav__cta):hover,
.nav__link:hover,
.nav a:not(.nav__cta).is-active,
.nav__link.is-active,
.nav__group:hover .nav__link,
.nav__group:focus-within .nav__link {
  color: var(--ink);
}
.nav a:not(.nav__cta)::after,
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}
.nav a:not(.nav__cta):hover::after,
.nav__link:hover::after,
.nav a:not(.nav__cta).is-active::after,
.nav__link.is-active::after {
  transform: scaleX(1);
}
.nav__cta {
  padding: 11px 24px;
  font-size: 15px;
}

/* Dropdown */
.nav__group {
  position: relative;
  display: flex;
  align-items: center;
  padding: calc((var(--header-h) - 32px) / 2) 0;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav__caret {
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
}
.nav__group:hover .nav__caret,
.nav__group:focus-within .nav__caret {
  transform: rotate(180deg);
}
.nav__menu {
  position: absolute;
  top: 100%;
  left: -16px;
  min-width: 232px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s;
}
.nav__group:hover .nav__menu,
.nav__group:focus-within .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav .nav__menu a {
  padding: 11px 14px;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  color: var(--body);
  white-space: nowrap;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.nav .nav__menu a::after {
  display: none;
}
.nav .nav__menu a:hover,
.nav .nav__menu a.is-active {
  background: var(--paper-2);
  color: var(--ink);
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px;
  border-radius: var(--r-sm);
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  margin: 5px 0;
  transition:
    transform 0.24s ease,
    opacity 0.18s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(88vh, 780px);
  padding: clamp(64px, 9vw, 108px) 0 clamp(48px, 6vw, 72px);
  overflow: hidden;
  /* The stock photo is soft and generic, so it is washed back to a
     faint texture under a light brand-tinted gradient. */
  background:
    radial-gradient(
      66% 54% at 82% 12%,
      rgba(245, 130, 31, 0.16),
      transparent 62%
    ),
    radial-gradient(
      58% 58% at 6% 26%,
      rgba(52, 168, 189, 0.18),
      transparent 64%
    ),
    radial-gradient(
      74% 62% at 46% 104%,
      rgba(85, 102, 184, 0.12),
      transparent 62%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.945) 0%,
      rgba(255, 255, 255, 0.975) 46%,
      var(--paper) 100%
    ),
    url("../assets/images/blob-00bfc34.png") center / cover no-repeat
      var(--paper);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(18, 35, 61, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 35, 61, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(
    68% 62% at 50% 34%,
    #000 30%,
    transparent 100%
  );
  mask-image: radial-gradient(68% 62% at 50% 34%, #000 30%, transparent 100%);
}

/* Headline on the left, "what we do" panel on the right */
.hero__grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(32px, 4.5vw, 60px);
  align-items: center;
}
.hero__inner {
  position: relative;
  min-width: 0;
}
.hero h1 {
  font-size: clamp(38px, 4.6vw, 60px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 22px;
}
/* Scoped to the headline column so it cannot leak into the panel's
   own paragraphs (the old `.hero p` form was out-specifying them). */
.hero__inner > p:not(.eyebrow) {
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.6;
  color: var(--body);
  max-width: 600px;
  margin: 0 0 34px;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---- Hero "what we do" panel ---- */
.hero__panel {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: clamp(20px, 2.2vw, 26px);
  background: rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  min-width: 0;
}
.hero__panel-title {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}

.solution-link {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px;
  border-radius: var(--r);
  border: 1px solid transparent;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}
.solution-link:hover {
  background: var(--paper);
  border-color: var(--line);
  transform: translateX(2px);
}
.solution-link__icon {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--teal-ink);
  background: linear-gradient(
    135deg,
    rgba(52, 168, 189, 0.16),
    rgba(85, 102, 184, 0.16)
  );
}
.solution-link__icon svg {
  width: 19px;
  height: 19px;
}
.solution-link__text {
  min-width: 0;
}
.solution-link__text strong {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.solution-link__text span {
  display: block;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}
.solution-link__arrow {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 10px;
  color: var(--muted);
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}
.solution-link:hover .solution-link__arrow {
  opacity: 1;
  transform: none;
  color: var(--brand-ink);
}

.hero__services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.hero__services li {
  position: relative;
  padding-left: 16px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--body);
}
.hero__services li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
}
.hero__panel-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--teal-ink);
  transition: gap 0.18s ease;
}
.hero__panel-more svg {
  width: 15px;
  height: 15px;
}
.hero__panel-more:hover {
  gap: 11px;
}

/* Proof strip — figures lifted from the About copy */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 40px);
  list-style: none;
  margin: clamp(40px, 5vw, 60px) 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--line-2);
}
.hero__stats dt,
.hero__stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
.hero__stat-label {
  display: block;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}

/* ---------- 7. Interior page hero ---------- */
.page-hero {
  padding: clamp(48px, 6vw, 76px) 0 clamp(32px, 4vw, 48px);
  position: relative;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 420px;
  z-index: -1;
  background: radial-gradient(
    58% 100% at 22% 0%,
    rgba(52, 168, 189, 0.12),
    transparent 70%
  );
}
.page-hero h1 {
  font-size: clamp(34px, 5vw, 58px);
  margin-bottom: 18px;
}
.page-hero p:not(.eyebrow) {
  color: var(--body);
  font-size: clamp(16px, 1.6vw, 18.5px);
  margin: 0;
  max-width: 56ch;
}

/* ---------- 8. Cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 26px);
}
/* Two even columns, with .card--wide spanning the full row below them */
.cards--split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.card--wide {
  grid-column: 1 / -1;
}
.card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}
.card:hover {
  transform: translateY(-5px);
  border-color: var(--line-2);
  box-shadow: var(--shadow-lg);
}
.card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.card:hover .card__media img {
  transform: scale(1.05);
}
.card__media--contain img {
  object-fit: contain;
  padding: 26px;
}
.card__body {
  padding: clamp(22px, 2.4vw, 30px);
  flex: 1;
}
.card h3 {
  font-size: clamp(21px, 2vw, 25px);
  margin-bottom: 12px;
}
.card p {
  color: var(--body);
  margin: 0;
  font-size: 15.5px;
}
.card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--body);
  font-size: 15.5px;
}
.card li {
  position: relative;
  padding: 8px 0 8px 26px;
}
.card li + li {
  border-top: 1px solid var(--line);
}
/* Check marker, drawn in CSS so no icon asset is needed */
.card li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 17px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--teal-ink);
  border-bottom: 2px solid var(--teal-ink);
  transform: rotate(-45deg);
}

/* Feature card — carries the brand ribbon instead of a photo */
.card--feature {
  background:
    radial-gradient(
      120% 80% at 100% 0%,
      rgba(52, 168, 189, 0.12),
      transparent 62%
    ),
    radial-gradient(
      100% 80% at 0% 100%,
      rgba(85, 102, 184, 0.12),
      transparent 64%
    ),
    var(--paper-soft);
  border-color: var(--line-2);
}
.card--feature .card__body {
  padding-top: clamp(26px, 2.6vw, 34px);
}
.card__ribbon {
  display: block;
  width: 46px;
  height: auto;
  margin-bottom: 20px;
}

/* ---------- 9. Services ---------- */
/* Service lifecycle (services page) — three ordered stages joined by a
   spine, so a long capability catalogue reads as a progression from
   discovery through to submission. */
.lifecycle {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: stage;
}
.lifecycle__stage {
  counter-increment: stage;
  position: relative;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: clamp(18px, 2.4vw, 30px);
  padding-bottom: clamp(26px, 3vw, 40px);
}
.lifecycle__stage:last-child {
  padding-bottom: 0;
}

/* Marker column: numbered badge with a connector running to the next.
   The connector is positioned against the stage, not the marker, so it
   spans the padding and meets the following badge without a break. */
.lifecycle__marker {
  display: flex;
  justify-content: center;
}
.lifecycle__num {
  flex: none;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--brand-ink);
}
.lifecycle__num::before {
  content: "0" counter(stage);
}
.lifecycle__marker::after {
  content: "";
  position: absolute;
  top: 70px; /* badge height + breathing room */
  bottom: 0;
  left: 29px; /* centre of the 58px marker column */
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--line-2), var(--line));
}
.lifecycle__stage:last-child .lifecycle__marker::after {
  display: none;
}

.lifecycle__panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: clamp(24px, 3vw, 38px);
}
.lifecycle__panel h3 {
  font-size: clamp(21px, 2.2vw, 27px);
  margin-bottom: 20px;
}
/* Multi-column rather than a 2-track grid: entries vary a lot in length
   and grid rows would size to the tallest item, leaving ragged gaps.
   "260px 2" caps it at two columns and folds to one automatically when
   the panel is too narrow, so no breakpoint is needed. */
.lifecycle__list {
  columns: 260px 2;
  column-gap: clamp(24px, 3vw, 44px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.lifecycle__list li {
  position: relative;
  padding: 9px 0 9px 22px;
  color: var(--body);
  font-size: 15.5px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.lifecycle__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px rgba(245, 130, 31, 0.18);
}

.service h3 {
  font-size: clamp(20px, 2vw, 24px);
  margin-bottom: 18px;
}
.service ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.service li {
  position: relative;
  padding: 9px 0 9px 22px;
  color: var(--body);
  font-size: 15.5px;
}
.service li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px rgba(245, 130, 31, 0.18);
}

/* Home preview — numbered cards */
.service-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 26px);
  counter-reset: svc;
}
.service-cards .service {
  counter-increment: svc;
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(26px, 2.6vw, 34px);
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}
.service-cards .service::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--grad-brand);
}
.service-cards .service::before {
  content: "0" counter(svc);
  position: absolute;
  top: 22px;
  right: 24px;
  font-family: var(--font-display);
  font-size: 42px;
  line-height: 1;
  color: rgba(18, 35, 61, 0.1);
}
.service-cards .service:hover {
  transform: translateY(-5px);
  border-color: var(--line-2);
  box-shadow: var(--shadow-lg);
}
.service-cards .service h3 {
  max-width: 78%;
  margin-bottom: 20px;
}
.section__cta {
  text-align: center;
  margin-top: clamp(36px, 4vw, 52px);
}

/* ---------- 10. Feature rows (solutions pages) ---------- */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 58px);
  align-items: center;
  margin-bottom: clamp(44px, 6vw, 72px);
}
.feature-row:last-child {
  margin-bottom: 0;
}
.feature-row:nth-child(even) .feature-row__media {
  order: 2;
}
.feature-row h3 {
  font-size: clamp(23px, 2.6vw, 30px);
}
.feature-row p {
  color: var(--body);
}
.feature-row ul {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  color: var(--body);
}
.feature-row li {
  position: relative;
  padding: 7px 0 7px 22px;
}
.feature-row li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(52, 168, 189, 0.18);
}
.feature-row__media {
  background:
    radial-gradient(
      90% 90% at 30% 20%,
      rgba(52, 168, 189, 0.14),
      transparent 66%
    ),
    var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.feature-row__media svg {
  width: 92px;
  height: 92px;
  color: var(--teal-ink);
}

/* ---------- 11. Team grid (about page) ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 32px);
  max-width: 1024px;
  margin: 0 auto;
}
.team-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(26px, 3vw, 38px);
  box-shadow: var(--shadow);
}
.team-card__avatar {
  width: 92px;
  height: 92px;
  flex: none;
  border-radius: 50%;
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  overflow: hidden;
}
.team-card__avatar svg {
  width: 44px;
  height: 44px;
  color: var(--teal-ink);
}
/* The about page puts a headshot here rather than the fallback icon */
.team-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.team-card h3 {
  font-size: clamp(22px, 2.2vw, 26px);
  margin-bottom: 4px;
}
.team-card__role {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin-bottom: 16px;
}
.team-card p {
  color: var(--body);
  font-size: 15.5px;
  margin: 0 0 18px;
}
.team-card p:last-child {
  margin-bottom: 0;
}
.team-card__link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 3px;
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}
.team-card__link:hover {
  border-color: var(--brand);
  color: var(--brand-ink);
}

/* ---------- 12. Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(34px, 5vw, 64px);
  align-items: start;
}
.contact-info h2 {
  font-size: clamp(30px, 4vw, 46px);
  margin-bottom: 16px;
}
.contact-info > p {
  color: var(--body);
  font-size: clamp(16px, 1.6vw, 18.5px);
  max-width: 46ch;
}
.contact-info .info-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 18px;
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}
.contact-info .info-item:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow);
}
.contact-info .info-item svg {
  width: 22px;
  height: 22px;
  color: var(--teal-ink);
  flex: none;
  margin-top: 4px;
}
.contact-info .info-item strong {
  display: block;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.contact-info .info-item span {
  color: var(--body);
  font-size: 15.5px;
}

/* The React widget supplies its own panel, border and shadow —
   this wrapper only handles placement. */
#celyxa-contact-form {
  min-height: 320px;
  display: flex;
  justify-content: flex-start;
}

/* ---------- 13. Placeholder (resources) ---------- */
.placeholder {
  text-align: center;
  padding: 40px 0 20px;
}
.placeholder .badge {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-ink);
  background: rgba(52, 168, 189, 0.1);
  border: 1px solid rgba(52, 168, 189, 0.3);
  border-radius: 999px;
  padding: 7px 18px;
  margin-bottom: 24px;
}
.placeholder p {
  color: var(--body);
  max-width: 58ch;
  margin: 0 auto 26px;
}

/* ---------- 14. Footer (stays dark — anchors the light page) ---------- */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: clamp(52px, 6vw, 76px) 0 28px;
  font-size: 15px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  margin-bottom: 40px;
}
/* Uses the original light-wordmark logo.png, which suits the dark band */
.site-footer img {
  height: 34px;
  margin-bottom: 18px;
}
.footer-grid > div:first-child p {
  max-width: 42ch;
  margin: 0;
  color: var(--footer-muted);
}
.site-footer h4 {
  font-family: var(--font-body);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer li {
  margin: 9px 0;
  color: var(--footer-muted);
}
.site-footer a {
  color: var(--footer-text);
  transition: color 0.15s ease;
}
.site-footer a:hover {
  color: var(--brand);
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 24px;
  text-align: center;
  font-size: 13.5px;
  color: var(--footer-muted);
}

/* ---------- 15. Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- 16. Responsive ---------- */
@media (max-width: 980px) {
  .cards,
  .service-cards {
    grid-template-columns: 1fr;
  }
  .service-cards .service h3 {
    max-width: 82%;
  }
  .contact-grid,
  .feature-row,
  .footer-grid,
  .hero__grid {
    grid-template-columns: 1fr;
  }
  .hero__grid {
    gap: 36px;
  }
  .feature-row:nth-child(even) .feature-row__media {
    order: 0;
  }
  #celyxa-contact-form {
    justify-content: stretch;
  }
  .team-grid {
    grid-template-columns: 1fr;
  }

  /* Mobile nav */
  .nav-toggle {
    display: block;
  }
  .nav {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* Fully opaque so the hero headline cannot ghost through */
    background: var(--paper);
    padding: 10px var(--gutter) 24px;
    display: none;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
  .nav.is-open {
    display: flex;
  }
  .nav a:not(.nav__cta),
  .nav__link {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
  }
  .nav a:not(.nav__cta)::after,
  .nav__link::after {
    display: none;
  }
  .nav__cta {
    margin-top: 20px;
    justify-content: center;
  }
  .nav__group {
    display: block;
    position: static;
    padding: 0;
  }
  .nav__link {
    width: 100%;
    justify-content: space-between;
  }
  .nav__caret {
    display: none;
  }
  .nav__menu {
    position: static;
    min-width: 0;
    padding: 0 0 0 18px;
    gap: 0;
    background: none;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav .nav__menu a {
    padding: 13px 0;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
  }
  .nav .nav__menu a:hover,
  .nav .nav__menu a.is-active {
    background: none;
    color: var(--brand-ink);
  }
}

@media (max-width: 620px) {
  body {
    font-size: 16px;
  }
  .hero {
    min-height: 0;
  }
  /* Stacked rather than a number/label row — "End-to-end" is a single
     unbreakable string that would overflow a fixed-width column. */
  .hero__stats {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .hero__stat-num {
    margin-bottom: 2px;
  }
  .hero__stat-label {
    max-width: 42ch;
  }
  .hero__actions .btn {
    flex: 1 1 auto;
  }
  /* Two service columns are too cramped below ~620px */
  .hero__services {
    grid-template-columns: 1fr;
  }
  /* Give the lifecycle panel back the width the marker column takes */
  .lifecycle__stage {
    grid-template-columns: 44px 1fr;
    gap: 14px;
  }
  .lifecycle__num {
    width: 44px;
    height: 44px;
    font-size: 17px;
  }
  .lifecycle__marker::after {
    top: 56px;
    left: 22px;
  }
  .solution-link {
    padding: 12px 4px;
  }
  .service-cards .service h3 {
    max-width: 100%;
  }
  .service-cards .service::before {
    display: none;
  }
}

/* ---------- 17. Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* =============================================================
   18. TEMPORARY — React contact-form light compatibility
   -------------------------------------------------------------
   The widget ships a dark panel (#16171a) that would read as a
   black box on a white page. This re-points only its own public
   CSS variables — the component's markup, layout and fonts are
   untouched. Delete this whole block when the widget is restyled.

   The widget's own stylesheet is linked after this one, so these
   need the extra `body` to win on specificity rather than order.
   ============================================================= */
body .cxa-form {
  --cxa-text: #12233d;
  --cxa-muted: #5d6d84;
  --cxa-panel: #ffffff;
  --cxa-input: #f7fafc;
  --cxa-line: rgba(18, 35, 61, 0.16);
  --cxa-line-strong: rgba(18, 35, 61, 0.28);
  --cxa-error: #c0392b;
  border-color: var(--cxa-line);
  box-shadow: var(--shadow-lg);
}
/* Its primary button is white-on-white here; make it the brand fill. */
.cxa-form .cxa-btn--primary {
  background: var(--brand);
  color: #1a1206;
}
.cxa-form .cxa-btn--primary:hover:not(:disabled) {
  background: var(--brand-600);
  color: #fff;
}
.cxa-form .cxa-field input::placeholder,
.cxa-form .cxa-field textarea::placeholder {
  color: #8595a9;
}
/* These are hardcoded in the widget rather than themed through its
   own variables, so they turn invisible or too faint on a white
   panel — the labels in particular were unreadable. */
.cxa-form .cxa-field label {
  color: var(--ink);
}
.cxa-form .cxa-form__note {
  color: var(--muted);
}
.cxa-form .cxa-req {
  color: var(--brand-ink);
}
.cxa-form .cxa-btn--ghost:hover:not(:disabled) {
  background: var(--paper-2);
}
.cxa-form .cxa-form__icon--ok {
  background: rgba(46, 160, 87, 0.14);
  color: #1e7a41;
}