/* ============================================================
   CASHEENO — UI foundation (site-wide chrome)
   Tokens, buttons, nav and footer. No dependencies.
   Everything is prefixed `cs-` so it cannot collide with the
   legacy Bootstrap styles still used by the inner pages.
   ============================================================ */

:root {
  /* --- surface & ink --- */
  --cs-bg:          #07080B;
  --cs-bg-soft:     #0B0D12;
  --cs-surface:     #11141B;
  --cs-surface-2:   #171B24;
  --cs-line:        rgba(255, 255, 255, .08);
  --cs-line-strong: rgba(255, 255, 255, .16);

  --cs-fg:       #F3F5F9;
  --cs-fg-muted: #A5ACBB;
  /* #6B7484 measured 3.50:1 on card surfaces - below the 4.5:1 AA floor.
     #8A93A4 clears 4.5:1 against every background used on the site. */
  --cs-fg-dim:   #8A93A4;

  /* --- brand, taken from the Casheeno mark --- */
  --cs-brand:   #C026D3;
  /* Brand magenta is only 3.51:1 on a card, so text uses a lightened tint.
     --cs-brand stays for fills, borders and focus rings (3:1 is enough there). */
  --cs-brand-text: #E571F2;
  --cs-brand-2: #7C3AED;
  --cs-blue:    #3B82F6;
  --cs-gold:    #E0A32E;
  --cs-mint:    #2DD4A7;

  --cs-grad:      linear-gradient(100deg, var(--cs-brand) 0%, var(--cs-brand-2) 52%, var(--cs-blue) 100%);
  --cs-grad-soft: linear-gradient(100deg, rgba(192,38,211,.16), rgba(124,58,237,.16));

  /* --- geometry --- */
  --cs-r-sm: 10px;
  --cs-r:    16px;
  --cs-r-lg: 24px;
  --cs-r-xl: 32px;
  --cs-maxw: 1180px;
  --cs-pad:  clamp(1.15rem, 4.2vw, 2.75rem);
  --cs-nav-h: 68px;

  /* --- type --- */
  --cs-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --cs-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
             "Liberation Mono", "Courier New", monospace;

  /* --- motion --- */
  --cs-ease: cubic-bezier(.22, .61, .36, 1);
  --cs-dur:  .38s;

  --cs-shadow:    0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.6);
  --cs-shadow-lg: 0 2px 4px rgba(0,0,0,.4), 0 32px 64px -24px rgba(0,0,0,.75);
}

/* ------------------------------------------------------------
   Lean pages (the redesigned home) own the whole canvas.
   Inner legacy pages keep their light Bootstrap body and only
   inherit the dark nav + footer.
   ------------------------------------------------------------ */
body.cs-lean {
  margin: 0;
  background: var(--cs-bg);
  color: var(--cs-fg);
  font-family: var(--cs-font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* These are a RESET, so they are wrapped in :where() to carry the specificity
   of the bare element selector only (0,0,1) instead of (0,1,2).
   Written as `body.cs-lean img`, this block outranked every single-class rule
   in the codebase - `.cs-foot__stores img { height: 40px }`, `.cs-step h3
   { margin-bottom }`, `.cs-side p`, `.cs-prose h4` and a dozen more silently
   lost to it. Any `.class element` rule now wins, as you would expect. */
:where(body.cs-lean) * { box-sizing: border-box; }
:where(body.cs-lean) img,
:where(body.cs-lean) svg { max-width: 100%; }
:where(body.cs-lean) img { height: auto; display: block; }
:where(body.cs-lean) h1, :where(body.cs-lean) h2, :where(body.cs-lean) h3,
:where(body.cs-lean) h4, :where(body.cs-lean) p, :where(body.cs-lean) figure { margin: 0; }
:where(body.cs-lean) ul,
:where(body.cs-lean) ol { margin: 0; padding: 0; list-style: none; }
:where(body.cs-lean) dl { margin: 0; }
:where(body.cs-lean) a { color: inherit; text-decoration: none; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Anchor targets clear the sticky header. Site-wide: the legal pages use
   in-page anchors too and would otherwise land under the nav. */
:target { scroll-margin-top: calc(var(--cs-nav-h) + 24px); }
[id]    { scroll-margin-top: calc(var(--cs-nav-h) + 24px); }

::selection { background: rgba(192, 38, 211, .35); color: #fff; }

.cs-shell {
  width: 100%;
  max-width: var(--cs-maxw);
  margin-inline: auto;
  padding-inline: var(--cs-pad);
}

/* Visible focus for keyboard users, invisible for mouse users */
.cs-nav :focus-visible,
.cs-foot :focus-visible,
body.cs-lean :focus-visible {
  outline: 2px solid var(--cs-brand);
  outline-offset: 3px;
  border-radius: 4px;
}

.cs-skip {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -140%);
  z-index: 999;
  background: var(--cs-fg);
  color: #07080B;
  font: 600 14px/1 var(--cs-font);
  padding: 12px 20px;
  border-radius: 0 0 10px 10px;
  transition: transform .2s var(--cs-ease);
}
.cs-skip:focus { transform: translate(-50%, 0); }

/* ============================================================
   Buttons
   ============================================================ */
.cs-btn {
  --_bg: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  font-family: var(--cs-font);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
  padding: .95em 1.5em;
  border: 1px solid transparent;
  border-radius: 100px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .2s var(--cs-ease), box-shadow .25s var(--cs-ease),
              background-color .2s var(--cs-ease), border-color .2s var(--cs-ease),
              color .2s var(--cs-ease);
}
.cs-btn svg { width: 1.05em; height: 1.05em; flex: none; }
.cs-btn:hover { transform: translateY(-2px); }
.cs-btn:active { transform: translateY(0); }

.cs-btn--primary {
  color: #fff;
  background: var(--cs-grad);
  box-shadow: 0 8px 24px -10px rgba(192, 38, 211, .9);
}
.cs-btn--primary:hover {
  color: #fff;
  box-shadow: 0 14px 34px -10px rgba(192, 38, 211, 1);
}

.cs-btn--ghost {
  color: var(--cs-fg);
  background: rgba(255, 255, 255, .04);
  border-color: var(--cs-line-strong);
}
.cs-btn--ghost:hover {
  color: var(--cs-fg);
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .3);
}

.cs-btn--sm { font-size: .875rem; padding: .75em 1.2em; }

/* ============================================================
   Navigation
   ============================================================ */
.cs-nav {
  position: sticky;
  top: 0;
  z-index: 120;
  background: rgba(7, 8, 11, .72);
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--cs-ease), border-color .3s var(--cs-ease),
              box-shadow .3s var(--cs-ease);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .cs-nav {
    background: rgba(7, 8, 11, .6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}
.cs-nav.is-stuck {
  background: rgba(7, 8, 11, .9);
  border-bottom-color: var(--cs-line);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .9);
}

.cs-nav__inner {
  max-width: var(--cs-maxw);
  margin-inline: auto;
  padding-inline: var(--cs-pad);
  min-height: var(--cs-nav-h);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cs-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-right: auto;
  padding: .35rem 0;
  flex: none;
}
.cs-nav__brand img { display: block; }
.cs-nav__mark { width: 32px; height: 32px; }

/* Text wordmark — set in the UI font so it stays pin-sharp at any DPI
   and costs nothing to download. Optically aligned with the mark:
   line-height 1 kills the font's internal leading so the cap-height
   centres against the 32px logo instead of sitting low. */
.cs-wordmark {
  font-family: var(--cs-font);
  font-size: 1.075rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .015em;
  color: var(--cs-fg);
  white-space: nowrap;
  /* nudge for the sans-serif baseline sitting below optical centre */
  transform: translateY(.5px);
  -webkit-font-smoothing: antialiased;
}
.cs-wordmark--lg { font-size: 1.2rem; }

.cs-nav__burger {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  flex: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--cs-line);
  border-radius: 12px;
  color: var(--cs-fg);
  cursor: pointer;
}
.cs-nav__burger span {
  position: relative;
  display: block;
  width: 17px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .3s var(--cs-ease), opacity .2s linear;
}
.cs-nav__burger span::before,
.cs-nav__burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: currentColor;
  transition: transform .3s var(--cs-ease);
}
.cs-nav__burger span::before { top: -5.5px; }
.cs-nav__burger span::after  { top:  5.5px; }
.cs-nav__burger[aria-expanded="true"] span { transform: rotate(45deg); }
.cs-nav__burger[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(-90deg); }
.cs-nav__burger[aria-expanded="true"] span::after  { opacity: 0; }

.cs-nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(.35rem, 1.3vw, 1.1rem);
}
.cs-nav__link {
  position: relative;
  display: inline-block;
  padding: .55rem .2rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--cs-fg-muted);
  transition: color .2s var(--cs-ease);
}
.cs-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .1rem;
  height: 2px;
  border-radius: 2px;
  background: var(--cs-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--cs-ease);
}
.cs-nav__link:hover,
.cs-nav__link[aria-current="page"] { color: var(--cs-fg); }
.cs-nav__link:hover::after,
.cs-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.cs-nav__cta { margin-left: clamp(.4rem, 1.4vw, 1rem); }

@media (max-width: 900px) {
  .cs-nav__burger { display: inline-flex; }
  .cs-nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: grid;
    grid-template-rows: 0fr;
    grid-auto-rows: 0fr;
    align-items: start;
    /* Opaque, not translucent: .cs-nav already carries a backdrop-filter, and
       a nested backdrop-filter samples its ancestor's filtered output rather
       than the page, so the panel rendered see-through over the hero. */
    background: #0A0C12;
    border-bottom: 1px solid var(--cs-line);
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .9);
    transition: grid-template-rows .34s var(--cs-ease), visibility .34s linear;
    visibility: hidden;
    overflow: hidden;
  }
  .cs-nav__menu > * { min-height: 0; }
  .cs-nav__menu.is-open {
    grid-template-rows: 1fr;
    grid-auto-rows: auto;
    visibility: visible;
  }
  /* Still two classes: on the legacy pages Bootstrap reboot sets
     `ul { padding-left: 2rem }`, which a bare `.cs-nav__list` would tie with. */
  .cs-nav__menu .cs-nav__list {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    overflow: hidden;
    padding: .6rem var(--cs-pad) 0;
  }
  .cs-nav__link {
    display: block;           /* inline-block made the dividers word-width */
    padding: .85rem 0;
    font-size: 1.02rem;
    border-bottom: 1px solid var(--cs-line);
  }
  .cs-nav__link::after { display: none; }
  .cs-nav__cta {
    margin: 1.1rem var(--cs-pad) 1.4rem;
    justify-content: center;
  }
}
@media (min-width: 901px) {
  .cs-nav__list { display: contents; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-nav__menu { transition: none; }
}

/* Without JS the burger cannot open anything, so lay the menu out inline
   rather than leaving it permanently hidden. */
@media (max-width: 900px) and (scripting: none) {
  .cs-nav__inner { flex-wrap: wrap; }
  .cs-nav__burger { display: none; }
  .cs-nav__menu {
    position: static;
    visibility: visible;
    grid-template-rows: 1fr;
    width: 100%;
    background: none;
    border-bottom: 0;
  }
}

/* ============================================================
   Footer
   ============================================================ */
.cs-foot {
  background: #06070A;
  border-top: 1px solid var(--cs-line);
  color: var(--cs-fg-muted);
  font-family: var(--cs-font);
  font-size: .925rem;
  line-height: 1.65;
}
.cs-foot__grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.6fr) repeat(3, minmax(130px, 1fr));
  gap: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(3rem, 7vw, 5rem) clamp(2rem, 4vw, 3rem);
}
@media (max-width: 860px) {
  .cs-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-foot__brandcol { grid-column: 1 / -1; }
}

.cs-foot__brand { display: inline-flex; align-items: center; gap: .65rem; }
.cs-foot__brand img { display: block; }
.cs-foot__blurb {
  margin: 1.1rem 0 0;
  max-width: 34ch;
  color: var(--cs-fg-dim);
}
.cs-foot__social { display: flex; gap: .6rem; margin-top: 1.5rem; }
.cs-foot__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--cs-line);
  border-radius: 11px;
  color: var(--cs-fg-muted);
  background: rgba(255, 255, 255, .03);
  transition: color .2s var(--cs-ease), border-color .2s var(--cs-ease),
              background-color .2s var(--cs-ease), transform .2s var(--cs-ease);
}
.cs-foot__social a:hover {
  color: #fff;
  transform: translateY(-2px);
  border-color: rgba(192, 38, 211, .55);
  background: rgba(192, 38, 211, .14);
}
.cs-foot__social svg { width: 17px; height: 17px; }

/* Badges are supplied artwork at differing aspect ratios (240x80 and 268x80).
   Pinning the height and letting width follow keeps them optically equal.
   `body` prefix is required: `body.cs-lean img { height: auto }` above is
   (0,1,2) and would otherwise win and render them at their intrinsic 80px. */
.cs-foot__stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin-top: 1.6rem;
}
.cs-foot__stores a {
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  transition: transform .2s var(--cs-ease), opacity .2s var(--cs-ease);
  opacity: .94;
}
.cs-foot__stores img {
  display: block;
  height: 40px;
  width: auto;
}
.cs-foot__stores a:hover { opacity: 1; transform: translateY(-2px); }

.cs-foot h3 {
  margin: 0 0 1.1rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cs-fg);
}
.cs-foot__links li + li { margin-top: .55rem; }
.cs-foot__links a {
  color: var(--cs-fg-dim);
  transition: color .18s var(--cs-ease);
}
.cs-foot__links a:hover { color: var(--cs-fg); }

.cs-foot__bar {
  border-top: 1px solid var(--cs-line);
  padding-block: 1.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: .82rem;
  color: var(--cs-fg-dim);
}
.cs-foot__bar p { margin: 0; }

/* Back to top */
.cs-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 110;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cs-line-strong);
  border-radius: 50%;
  background: rgba(17, 20, 27, .85);
  color: var(--cs-fg);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .28s var(--cs-ease), transform .28s var(--cs-ease), visibility .28s linear;
}
@supports (backdrop-filter: blur(1px)) {
  .cs-top { backdrop-filter: blur(10px); }
}
.cs-top.is-on { opacity: 1; visibility: visible; transform: translateY(0); }
.cs-top:hover { border-color: rgba(192, 38, 211, .6); background: rgba(192, 38, 211, .18); }
.cs-top svg { width: 17px; height: 17px; }

/* ============================================================
   Scroll reveal — opt-in, and inert without JS or with
   reduced motion so content is never hidden.
   ============================================================ */
.cs-js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--cs-ease), transform .6s var(--cs-ease);
  transition-delay: var(--cs-delay, 0ms);
}
.cs-js [data-reveal].is-in { opacity: 1; transform: none; }

@media print {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .cs-nav, .cs-top, .cs-skip { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-js [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ============================================================
   PAGE PRIMITIVES
   Section rhythm, headings, eyebrow, card and chip. Shared by every
   page built on this design system, not just the home page.
   ============================================================ */

/* ---------- shared section rhythm ---------- */
.cs-sec {
  position: relative;
  padding-block: clamp(4.5rem, 10vw, 8rem);
}
/* Skip layout/paint work for sections below the fold. */
.cs-sec--defer {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

.cs-eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--cs-mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cs-fg-muted);
  padding: .45rem .85rem .45rem .6rem;
  border: 1px solid var(--cs-line);
  border-radius: 100px;
  background: rgba(255, 255, 255, .03);
}
.cs-eyebrow::before {
  content: "";
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cs-mint);
}
/* Halo on its own layer: transform/opacity composite, box-shadow repaints. */
.cs-eyebrow::after {
  content: "";
  position: absolute;
  left: .6rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(45, 212, 167, .35);
  animation: cs-pulse 2.6s var(--cs-ease) infinite;
  pointer-events: none;
}
@keyframes cs-pulse {
  0%, 100% { transform: scale(1);   opacity: .6; }
  50%      { transform: scale(2.6); opacity: 0; }
}

.cs-h1 {
  /* Sized so each line fits the copy column whole - the two-line lockup is the
     design, so the type scales to the column instead of re-wrapping inside it. */
  font-size: clamp(2.1rem, 3.9vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  font-weight: 700;
}
.cs-h1__line { display: block; }
@media (max-width: 420px) {
  .cs-h1 { font-size: 1.95rem; }
}
.cs-h2 {
  font-size: clamp(1.85rem, 4.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 700;
  text-wrap: balance;
}
.cs-h3 {
  font-size: 1.16rem;
  line-height: 1.3;
  letter-spacing: -.015em;
  font-weight: 650;
}
.cs-lede {
  font-size: clamp(1.02rem, 1.9vw, 1.19rem);
  line-height: 1.62;
  color: var(--cs-fg-muted);
  text-wrap: pretty;
}

.cs-grad-text {
  background: var(--cs-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cs-head {
  display: grid;
  justify-items: start;
  gap: 1.15rem;
  max-width: 62ch;
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}
.cs-head--center { margin-inline: auto; text-align: center; justify-items: center; }

/* Glass card shared look */
.cs-card {
  position: relative;
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-r-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)),
    var(--cs-surface);
}


.cs-chips { display: flex; flex-wrap: wrap; align-content: flex-start; gap: .4rem; }
.cs-chip {
  /* inline-flex, not inline: an inline element's vertical padding and border
     do not grow its line box, so the pill overflows its own row and wrapped
     rows overlap. */
  display: inline-flex;
  align-items: center;
  font-family: var(--cs-mono);
  font-size: .72rem;
  line-height: 1.2;
  padding: .35rem .65rem;
  white-space: nowrap;
  border: 1px solid var(--cs-line);
  border-radius: 100px;
  color: var(--cs-fg-muted);
  background: rgba(255, 255, 255, .028);
}


/* ============================================================
   PAGE SHELL
   Hero band, page intro and the closing call-to-action block.
   Shared by home, contact, careers and about.
   ============================================================ */
.cs-hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
}
.cs-hero__bg {
  position: absolute;
  inset: -20% 0 0;
  z-index: -1;
  pointer-events: none;
}
.cs-hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(52% 48% at 22% 18%, rgba(192,  38, 211, .24), transparent 64%),
    radial-gradient(46% 44% at 78% 24%, rgba(124,  58, 237, .20), transparent 64%),
    radial-gradient(50% 40% at 50% 98%, rgba( 59, 130, 246, .12), transparent 68%);
}
.cs-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(64% 56% at 50% 40%, #000 0%, transparent 76%);
          mask-image: radial-gradient(64% 56% at 50% 40%, #000 0%, transparent 76%);
}

/* Page hero: same treatment as home, shorter and single-column. */
.cs-hero--page {
  padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(1rem, 2vw, 1.5rem);
}

.cs-page__intro { display: grid; justify-items: start; max-width: none; }
.cs-page__intro > .cs-eyebrow { margin-bottom: 1.4rem; }
.cs-page__intro > .cs-h1      { margin-bottom: 1.2rem; max-width: 18ch; }
.cs-page__intro > .cs-lede    { margin-bottom: 1.9rem; max-width: 62ch; }

.cs-cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--cs-r-xl);
  border: 1px solid rgba(192, 38, 211, .3);
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  display: grid;
  gap: 1.25rem;
  justify-items: center;
  background:
    radial-gradient(70% 130% at 50% 0%, rgba(192, 38, 211, .28), transparent 68%),
    radial-gradient(60% 120% at 90% 100%, rgba(59, 130, 246, .18), transparent 66%),
    var(--cs-surface);
}
.cs-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.cs-cta__note {
  font-family: var(--cs-mono);
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--cs-fg-dim);
}


/* ============================================================
   FORMS, FLASH MESSAGES AND SIDEBAR CARDS
   Shared by the contact and careers pages.
   ============================================================ */
/* ---------- flash messages ---------- */
.cs-flash { display: grid; gap: .6rem; margin-bottom: 1.5rem; }
.cs-flash__item {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin: 0;
  padding: .95rem 1.15rem;
  font-size: .95rem;
  border-radius: var(--cs-r);
  border: 1px solid rgba(45, 212, 167, .35);
  background: rgba(45, 212, 167, .1);
  color: var(--cs-fg);
}
.cs-flash__item svg { width: 16px; height: 16px; flex: none; margin-top: .22em; color: var(--cs-mint); }
.cs-flash__item--error {
  border-color: rgba(244, 114, 128, .4);
  background: rgba(244, 114, 128, .1);
}
.cs-flash__item--error svg { color: #F47280; }

/* ---------- form ---------- */
.cs-formcard { padding: clamp(1.4rem, 3vw, 2.25rem); }

.cs-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.15rem;
}
@media (max-width: 620px) {
  .cs-fields { grid-template-columns: minmax(0, 1fr); }
}

.cs-field { display: grid; gap: .45rem; margin: 0; }
.cs-field--wide { grid-column: 1 / -1; }

.cs-field label {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--cs-fg);
}
.cs-field label span[aria-hidden] { color: var(--cs-brand-text); }
.cs-field__opt {
  font-weight: 500;
  font-size: .74rem;
  color: var(--cs-fg-dim);
  margin-left: .2rem;
}
.cs-field__hint { font-size: .78rem; color: var(--cs-fg-dim); }

.cs-field input,
.cs-field select,
.cs-field textarea {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  color: var(--cs-fg);
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--cs-line-strong);
  border-radius: var(--cs-r-sm);
  padding: .75rem .9rem;
  transition: border-color .2s var(--cs-ease), background-color .2s var(--cs-ease),
              box-shadow .2s var(--cs-ease);
  -webkit-appearance: none;
          appearance: none;
}
.cs-field textarea { resize: vertical; min-height: 9rem; line-height: 1.6; }
.cs-field input::placeholder,
.cs-field textarea::placeholder { color: var(--cs-fg-dim); }

.cs-field input:hover,
.cs-field select:hover,
.cs-field textarea:hover { border-color: rgba(255, 255, 255, .28); }

.cs-field input:focus,
.cs-field select:focus,
.cs-field textarea:focus {
  outline: none;
  border-color: var(--cs-brand);
  background: rgba(255, 255, 255, .055);
  box-shadow: 0 0 0 3px rgba(192, 38, 211, .22);
}

/* Native select arrow is unstyleable, so draw our own. */
.cs-field select {
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A5ACBB' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 15px 15px;
  cursor: pointer;
}
.cs-field select option { background: #11141B; color: var(--cs-fg); }

.cs-formcard__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.2rem;
  margin-top: 1.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--cs-line);
}
.cs-formcard__note { font-size: .84rem; color: var(--cs-fg-dim); }

/* ---------- sidebar ---------- */
.cs-contact__side { display: grid; gap: clamp(1rem, 2vw, 1.25rem); }

.cs-side { padding: 1.5rem 1.5rem 1.6rem; }
.cs-side--muted { background: var(--cs-bg-soft); }
.cs-side__title {
  margin: 0 0 1.1rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cs-fg);
}
.cs-side p { font-size: .9rem; color: var(--cs-fg-muted); margin-bottom: 1.1rem; }

.cs-side__links { display: grid; gap: 1rem; }
.cs-side__label {
  display: block;
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--cs-fg-dim);
  margin-bottom: .2rem;
}
.cs-side__links a {
  font-size: .95rem;
  font-weight: 600;
  color: var(--cs-fg);
  border-bottom: 1px solid rgba(192, 38, 211, .45);
  transition: color .2s var(--cs-ease), border-color .2s var(--cs-ease);
}
.cs-side__links a:hover { color: var(--cs-brand-text); border-bottom-color: currentColor; }

.cs-next { display: grid; gap: .85rem; counter-reset: cs-next; }
.cs-next li {
  position: relative;
  counter-increment: cs-next;
  padding-left: 2rem;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--cs-fg-muted);
}
.cs-next li::before {
  content: counter(cs-next);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  font-family: var(--cs-mono);
  font-size: .68rem;
  font-weight: 600;
  color: var(--cs-brand-text);
  background: rgba(192, 38, 211, .14);
  border: 1px solid rgba(192, 38, 211, .3);
}
.cs-next strong { color: var(--cs-fg); font-weight: 650; }

/* ============================================================
   STAT TILES
   Used on the home hero and the about page.
   ============================================================ */
.cs-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  width: 100%;
  max-width: 34rem;
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-r);
  background: var(--cs-line);
  overflow: hidden;
}
/* Markup order is dt-then-dd (required by the HTML spec and by screen
   readers); column-reverse puts the value back on top visually. */
.cs-stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  padding: 1.15rem 1.15rem 1.05rem;
  background: var(--cs-bg-soft);
  transition: background-color .25s var(--cs-ease);
}
.cs-stat:hover { background: var(--cs-surface); }
.cs-stat dt {
  font-size: .69rem;
  line-height: 1.35;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--cs-fg-dim);
  margin-top: .45rem;
}
.cs-stat dd {
  margin: 0;
  font-size: clamp(1.6rem, 2.6vw, 2.05rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--cs-fg);
  font-variant-numeric: tabular-nums;
}
.cs-stat__plus {
  font-size: .62em;
  font-weight: 600;
  letter-spacing: 0;
  vertical-align: .28em;
  margin-left: .04em;
  background: var(--cs-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (max-width: 560px) {
  .cs-stats { grid-template-columns: minmax(0, 1fr); }
}

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

/* ============================================================
   PROSE
   Authored HTML we do not control (CKEditor job descriptions) and
   hand-written body copy on the about page.
   ============================================================ */
/* CKEditor output — the JD is authored HTML we do not control.
   cs-ui.css's element resets are :where()-wrapped, so these plain class
   rules win without needing extra weight. */
.cs-prose { max-width: 68ch; color: var(--cs-fg-muted); font-size: 1rem; line-height: 1.72; }
.cs-prose > * + * { margin-top: 1rem; }
.cs-prose h2,
.cs-prose h3 {
  margin: 2.4rem 0 .75rem;
  font-weight: 650;
  letter-spacing: -.015em;
  line-height: 1.25;
  color: var(--cs-fg);
}
.cs-prose h2 { font-size: 1.36rem; }
.cs-prose h3 { font-size: 1.14rem; }
/* h4/h5 read as section labels - that is how our own posts use them. */
.cs-prose h4,
.cs-prose h5 {
  margin: 2.4rem 0 .9rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cs-fg);
}
.cs-prose > *:first-child { margin-top: 0; }
.cs-prose p { margin-top: 1rem; }
.cs-prose > p:first-child { margin-top: 0; }
.cs-prose strong, .cs-prose b { color: var(--cs-fg); font-weight: 650; }
.cs-prose a { color: var(--cs-brand-text); border-bottom: 1px solid currentColor; }
.cs-prose ul, .cs-prose ol { display: grid; gap: .55rem; padding-left: 0; list-style: none; }
.cs-prose li { position: relative; padding-left: 1.5rem; }
.cs-prose ul > li::before {
  content: "";
  position: absolute;
  left: .25rem;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cs-brand);
}
.cs-prose ol { counter-reset: cs-prose-n; }
.cs-prose ol > li { counter-increment: cs-prose-n; }
.cs-prose ol > li::before {
  content: counter(cs-prose-n) ".";
  position: absolute;
  left: 0;
  font-family: var(--cs-mono);
  font-size: .82em;
  color: var(--cs-brand-text);
}
.cs-prose img { max-width: 100%; height: auto; border-radius: var(--cs-r-sm); }
.cs-prose table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.cs-prose th, .cs-prose td { padding: .55rem .7rem; border: 1px solid var(--cs-line); text-align: left; }


/* ------------------------------------------------------------
   Legacy CKEditor content
   Archive posts were authored for a white page and carry inline
   styles we do not control: 337 declarations of color:#000000,
   plus Arial at 14px and justified text. Inline styles outrank
   every selector, so !important is the only lever here - this is
   the one place in the codebase that warrants it.
   ------------------------------------------------------------ */
.cs-prose [style] {
  color: inherit !important;
  background-color: transparent !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  text-align: inherit !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.cs-prose a,
.cs-prose a [style] { color: var(--cs-brand-text) !important; }
.cs-prose strong,
.cs-prose strong [style],
.cs-prose [style] strong { color: var(--cs-fg) !important; font-weight: 650; }

/* Long unbroken strings (pasted URLs) must not widen the column.
   `break-word` only breaks a word that would otherwise overflow; `anywhere`
   also breaks ordinary words mid-syllable, which turned table cells into
   "Strictly necessar / y". */
.cs-prose { overflow-wrap: break-word; }
.cs-prose table td,
.cs-prose table th { overflow-wrap: normal; }
.cs-prose br + br { display: none; }          /* stacked <br> used as spacing */
.cs-prose p:empty { display: none; }

/* ============================================================
   SMALL SHARED PIECES
   Back link and empty state - used by careers, role detail and blog.
   ============================================================ */
.cs-empty { padding: 2rem 1.75rem; display: grid; gap: .8rem; justify-items: start; }
.cs-empty p { color: var(--cs-fg-muted); max-width: 52ch; }
.cs-backlink {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: 1.5rem;
  font-size: .86rem;
  font-weight: 600;
  color: var(--cs-fg-muted);
  transition: color .2s var(--cs-ease), gap .2s var(--cs-ease);
}
.cs-backlink:hover { color: var(--cs-fg); gap: .65rem; }
.cs-backlink svg { width: 14px; height: 14px; }


/* ============================================================
   POST CARDS, TOPIC CHIPS, PAGER AND BREADCRUMBS
   Shared by the home page, the blog index, the category and author archives
   and the article page. Moved here out of cs-blog.css when the home page
   started linking into the blog.
   ============================================================ */
.cs-blog { padding-block: clamp(2rem, 4vw, 3rem) clamp(4rem, 8vw, 6.5rem); }

.cs-posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 306px), 1fr));
  gap: clamp(1rem, 2vw, 1.35rem);
}

.cs-post {
  display: flex;
  flex-direction: column;
  overflow: hidden;                  /* the thumbnail must clip to the radius */
  transition: transform .3s var(--cs-ease), border-color .3s var(--cs-ease),
              box-shadow .3s var(--cs-ease);
}
.cs-post:hover {
  transform: translateY(-4px);
  border-color: rgba(192, 38, 211, .32);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .9);
}

.cs-post__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--cs-bg-soft);
  border-bottom: 1px solid var(--cs-line);
}
.cs-post__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--cs-ease);
}
/* Archive thumbnails are photos; the new posts use SVG diagrams that should
   sit inside the frame rather than be cropped by it. */
.cs-post__thumb img[src$=".svg"] { object-fit: cover; }
.cs-post:hover .cs-post__thumb img { transform: scale(1.035); }

.cs-post__body {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.2rem 1.3rem 1.35rem;
  flex: 1;
}

.cs-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin: 0;
  font-family: var(--cs-mono);
  font-size: .68rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--cs-fg-dim);
}
.cs-post__cat { color: var(--cs-brand-text); }
.cs-post__dot { opacity: .55; }

.cs-post__title {
  margin: 0;
  font-size: 1.14rem;
  line-height: 1.28;
  letter-spacing: -.02em;
  font-weight: 650;
}
.cs-post__title a { transition: color .2s var(--cs-ease); }
.cs-post__title a:hover { color: var(--cs-brand-text); }

.cs-post__excerpt {
  margin: 0;
  font-size: .91rem;
  line-height: 1.6;
  color: var(--cs-fg-muted);
}
.cs-post__author {
  margin: auto 0 0;
  padding-top: .8rem;
  font-size: .8rem;
  color: var(--cs-fg-dim);
}

/* ---------- pagination ---------- */
.cs-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--cs-line);
}
.cs-pager__count {
  font-family: var(--cs-mono);
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--cs-fg-dim);
  text-align: center;
}


/* ---------- breadcrumbs ---------- */
/* Google asks for the trail to be on the page, not only in the JSON-LD. */
.cs-crumbs {
  border-bottom: 1px solid var(--cs-line);
  background: var(--cs-bg-soft);
}
.cs-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin: 0;
  padding: .7rem 0;
  list-style: none;
  font-size: .78rem;
  color: var(--cs-fg-dim);
}
.cs-crumbs__item + .cs-crumbs__item::before {
  content: "/";
  margin-right: .45rem;
  opacity: .45;
}
.cs-crumbs__item a { color: var(--cs-fg-muted); }
.cs-crumbs__item a:hover { color: var(--cs-brand-text); }
.cs-crumbs__item [aria-current] {
  color: var(--cs-fg);
  /* Long post titles must not push the row into a horizontal scroll. */
  display: inline-block;
  max-width: min(60vw, 44ch);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* ---------- topic chips ---------- */
.cs-topics { padding-top: clamp(1.5rem, 3vw, 2.25rem); }
.cs-topics__list {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cs-chip--link {
  transition: border-color .2s var(--cs-ease), color .2s var(--cs-ease),
              background-color .2s var(--cs-ease);
}
.cs-chip--link:hover { color: var(--cs-fg); border-color: rgba(192, 38, 211, .45); }
.cs-chip--link.is-current {
  color: var(--cs-brand-text);
  border-color: rgba(192, 38, 211, .55);
}

/* ---------- author card and archive headers ---------- */
.cs-authorcard {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: 1.35rem 1.5rem;
}
.cs-authorcard__img {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--cs-line);
}
.cs-authorcard__name { margin: 0; font-weight: 650; }
.cs-authorcard__name a:hover { color: var(--cs-brand-text); }
.cs-authorcard__role {
  margin: .15rem 0 .55rem;
  font-family: var(--cs-mono);
  font-size: .7rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--cs-fg-dim);
}
.cs-authorcard__bio { font-size: .9rem; line-height: 1.6; color: var(--cs-fg-muted); }
.cs-authorcard__bio p { margin: 0 0 .5rem; }
.cs-authorcard__bio p:last-child { margin-bottom: 0; }

.cs-archive__avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--cs-line);
  margin-bottom: 1rem;
}
.cs-archive__role {
  margin: 0 0 .8rem;
  font-family: var(--cs-mono);
  font-size: .74rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--cs-brand-text);
}
.cs-archive__links {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  font-size: .84rem;
}
.cs-archive__links a { color: var(--cs-fg-muted); border-bottom: 1px solid transparent; }
.cs-archive__links a:hover { color: var(--cs-brand-text); border-bottom-color: currentColor; }
.cs-archive__count {
  margin: 0;
  font-family: var(--cs-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cs-fg-dim);
}
.cs-archive__count a { color: var(--cs-brand-text); }

.cs-head__more { margin-top: clamp(1.5rem, 3vw, 2rem); }

@media (max-width: 560px) {
  .cs-authorcard { flex-direction: column; gap: .85rem; }
}

/* The category and author names on a post card are links now. */
a.cs-post__cat:hover { color: var(--cs-fg); }
.cs-post__author a { color: inherit; border-bottom: 1px solid transparent; }
.cs-post__author a:hover { color: var(--cs-brand-text); border-bottom-color: currentColor; }