:root {
  --white: #ffffff;
  --mineral: #d4dad7;
  --blue: #cad7e1;
  --lavender: #c3c8d3;
  --lilac: #9a93a4;
  --sage: #9aa797;
  --slate: #4d5564;
  --slate-deep: #363c48;
  --ink: #232323;

  --canvas: #ffffff;
  --surface: #ffffff;
  --ink-strong: #17171b;
  --ink-soft: #565b66;
  --ink-faint: #8b8f99;
  --accent: var(--slate);
  --rule: color-mix(in srgb, var(--slate) 16%, transparent);
  --rule-soft: color-mix(in srgb, var(--slate) 9%, transparent);

  --glass-tint: color-mix(in srgb, var(--white) 55%, transparent);
  --glass-tint-2: color-mix(in srgb, var(--lavender) 46%, transparent);
  --glass-edge: rgba(255, 255, 255, 0.72);
  --glass-rim: rgba(255, 255, 255, 0.3);
  --glass-shadow: 22px 34px 60px -30px rgba(54, 60, 72, 0.4);

  /* type system (brand type sheet): Host Grotesk Regular for headlines,
     Space Grotesk Light for uppercase subheaders/labels, Open Sans Regular for body */
  --font-display: "Host Grotesk", system-ui, sans-serif;
  --font-text: "Open Sans", system-ui, sans-serif;
  --font-mono: "Space Grotesk", system-ui, sans-serif;
  --fw-display: 400;
  --fw-label: 300;
  --measure: 62ch;

  --t-xs: 1.15rem;
  --t-sm: 1.3rem;
  --t-base: 1.5rem;
  --t-lg: clamp(1.65rem, 1.2rem + 0.7vw, 2rem);
  --t-xl: clamp(1.9rem, 1rem + 3vw, 3rem);
  --t-2xl: clamp(2.5rem, 1rem + 5vw, 5rem);
  --t-3xl: clamp(3rem, 0.8rem + 7.5vw, 7rem);
  --t-4xl: clamp(3.8rem, 0.4rem + 11vw, 10rem);

  --gutter: clamp(1.25rem, 5vw, 6rem);
  --section: clamp(6rem, 12vh, 11rem);
  --maxw: 1200px;
  --card-pad: clamp(1.7rem, 2.4vw, 2rem);
  --r-sm: 8px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 30px;

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

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

html {
  -webkit-text-size-adjust: 100%;
  font-size: 65%;
}
body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--ink-strong);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-optical-sizing: auto;
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
  color: var(--ink-strong);
}

h1 em,
h2 em,
h3 em,
.bigline em {
  font-style: italic;
  font-weight: var(--fw-display);
  color: inherit;
}
p {
  margin: 0;
  text-wrap: pretty;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  display: block;
  max-width: 100%;
}
::selection {
  background: color-mix(in srgb, var(--lilac) 42%, transparent);
  color: var(--ink);
}
:focus-visible {
  outline: 2px solid var(--slate);
  outline-offset: 3px;
  border-radius: 4px;
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--slate) 26%, transparent);
  border-radius: 20px;
  border: 3px solid var(--canvas);
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* white base with the original lavender/lilac ground layered over it at
   reduced strength, so the page stays mostly white with a soft tint */
.ground {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--white);
}
.ground::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.3; /* was 0.45: a fainter lilac wash */
  background:
    radial-gradient(
      120% 82% at 84% -8%,
      color-mix(in srgb, var(--lavender) 82%, var(--white)) 0%,
      transparent 54%
    ),
    radial-gradient(
      95% 72% at 4% 10%,
      color-mix(in srgb, var(--blue) 60%, var(--white)) 0%,
      transparent 50%
    ),
    radial-gradient(
      95% 70% at 52% 108%,
      color-mix(in srgb, var(--lilac) 66%, var(--white)) 0%,
      transparent 60%
    ),
    linear-gradient(
      180deg,
      #fbfafe 0%,
      #efebf7 44%,
      color-mix(in srgb, var(--lilac) 40%, var(--white)) 100%
    );
}
.ground__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.2;
  will-change: transform;
} /* was 0.3 */
.ground__blob--a {
  width: 46vw;
  height: 46vw;
  left: 55vw;
  top: 12vh;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--lilac) 56%, var(--white)),
    transparent 70%
  );
}
.ground__blob--b {
  width: 40vw;
  height: 40vw;
  left: -8vw;
  top: 120vh;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--blue) 66%, var(--white)),
    transparent 70%
  );
}
.ground__blob--c {
  width: 52vw;
  height: 52vw;
  left: 40vw;
  top: 240vh;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--sage) 40%, var(--white)),
    transparent 70%
  );
}
.ground__blob--d {
  width: 44vw;
  height: 44vw;
  left: 4vw;
  top: 360vh;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--lilac) 62%, var(--white)),
    transparent 70%
  );
}
.ground__grain {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.glass {
  position: relative;
  background: linear-gradient(135deg, var(--glass-tint), var(--glass-tint-2));
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  border-radius: var(--r-lg);
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 var(--glass-edge),
    inset 0 0 0 1px var(--glass-rim);
  overflow: hidden;
  isolation: isolate;
}
.refract {
  position: absolute;
  inset: -24%;
  z-index: -1;
  background:
    radial-gradient(
      60% 60% at 30% 20%,
      color-mix(in srgb, var(--blue) 66%, var(--white)),
      transparent 60%
    ),
    radial-gradient(
      70% 70% at 82% 78%,
      color-mix(in srgb, var(--lilac) 62%, var(--white)),
      transparent 62%
    ),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--lavender) 40%, var(--white)),
      color-mix(in srgb, var(--white) 80%, var(--lilac))
    );
  filter: url(#rm-refract);
  will-change: filter, transform;
}
.sheen {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 30%,
    color-mix(in srgb, var(--white) 65%, transparent) 46%,
    color-mix(in srgb, var(--white) 20%, transparent) 52%,
    transparent 66%
  );
  transform: translateX(calc((var(--sweep, 0.5) - 0.5) * 240%));
  opacity: 0.65;
  mix-blend-mode: screen;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: var(--fw-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-block;
  margin: 0 0 1.6rem;
}
.lede {
  font-size: var(--t-lg);
  color: var(--ink-soft);
  max-width: 52ch;
  line-height: 1.55;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: var(--t-sm);
  line-height: 1;
  padding: 0.9em 1.3em;
  border-radius: var(--r-sm);
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 160ms var(--ease-out),
    background 200ms ease,
    box-shadow 200ms ease,
    color 200ms ease;
}
.btn--primary {
  background: var(--ink-strong);
  color: #fff;
}
.btn--primary:hover {
  transform: translateY(-1px);
  background: #000;
}
.btn--primary:active {
  transform: translateY(0);
}
.btn--ghost {
  background: transparent;
  color: var(--ink-strong);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.btn--ghost:hover {
  background: color-mix(in srgb, var(--ink-strong) 5%, transparent);
}
.arrow {
  transition: transform 180ms var(--ease-out);
}
.btn:hover .arrow {
  transform: translateX(3px);
}

.shell {
  position: relative;
  z-index: 1;
}
.wrap {
  width: min(100% - var(--gutter) * 2, var(--maxw));
  margin-inline: auto;
}
.section {
  padding-block: var(--section);
  position: relative;
}

[data-reveal] {
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out);
}
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}
[data-parallax] {
  will-change: transform;
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.27rem clamp(1rem, 3vw, 1.8rem); /* ~15% shorter than the original 0.75rem; the logo keeps its size */
  margin: clamp(0.6rem, 1.4vw, 1rem) auto 0;
  width: min(100% - clamp(1.2rem, 4vw, 2.4rem), 1214px);
  border-radius: var(--r);
  transition:
    box-shadow 0.4s var(--ease-out),
    background 0.4s var(--ease-out);
}
/* animatable wipe position for the wordmark dissolve (registered so it can
   transition smoothly — a raw gradient stop can't be transitioned otherwise) */
@property --wipe {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 112%;
}

/* one knob for the logo size: the heart mark's offsets below are ratios of it,
   so the mark stays pixel-matched over the wordmark's heart at any size */
.nav__brand {
  --logo-h: 54px;
  display: inline-flex;
  align-items: center;
  position: relative;
}
.nav__logo {
  height: var(--logo-h);
  width: auto;
  display: block;
}
@media (max-width: 560px) {
  .nav__brand {
    --logo-h: 46px;
  }
}

/* The standalone heart mark is pixel-matched to the heart inside the wordmark
   and painted ON TOP, always fully opaque. So the heart is always rock-solid,
   perfectly sharp and never moves or resizes — at the top it simply sits exactly
   over the wordmark's own heart, indistinguishable from it. */
.nav__logo--mark {
  /* matched at 40px as left 13.5 / top 7.7 / height 22.5, kept as ratios */
  position: absolute;
  left: calc(var(--logo-h) * 0.3375);
  top: calc(var(--logo-h) * 0.1925);
  height: calc(var(--logo-h) * 0.5625);
  opacity: 1;
  pointer-events: none;
  z-index: 1;
}

/* The full wordmark sits underneath. Past the hero it performs a premium,
   layered dissolve of the "RediMinds" text: a soft-edged mask wipes it away
   from the right toward the heart, while it eases out with a gentle drift and
   blur on an expensive cubic-bezier. The sharp heart on top never flinches. */
.nav__logo--full {
  --wipe: 112%;
  /* The wordmark image also contains a heart on its left. We clip it away
     permanently (the cut lands in the empty gap between heart and text, so it's
     invisible) — this guarantees the ONLY heart ever painted is the sharp
     standalone mark, so no ghost/double-heart appears while the text blurs and
     drifts during the fade. */
  clip-path: inset(0 0 0 24.3%);
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 calc(var(--wipe) - 16%),
    transparent var(--wipe)
  );
  mask-image: linear-gradient(
    90deg,
    #000 calc(var(--wipe) - 16%),
    transparent var(--wipe)
  );
  transition:
    --wipe 0.85s cubic-bezier(0.62, 0.04, 0.24, 1),
    transform 0.85s cubic-bezier(0.62, 0.04, 0.24, 1),
    filter 0.6s ease,
    opacity 0.6s ease;
  will-change: --wipe, transform, filter, opacity;
}
.nav.is-past-hero .nav__logo--full {
  --wipe: 22%; /* collapse the mask down to just past the heart */
  transform: translateX(-5px);
  filter: blur(2.5px);
  opacity: 0;
}

/* Respect reduced-motion: fall back to a plain, instant-ish swap. */
@media (prefers-reduced-motion: reduce) {
  .nav__logo--full {
    transition: opacity 0.2s linear;
    mask-image: none;
    -webkit-mask-image: none;
    filter: none;
    transform: none;
  }
  .nav.is-past-hero .nav__logo--full {
    opacity: 0;
    transform: none;
    filter: none;
  }
}
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}
.nav__link {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  position: relative;
  padding: 0.3em 0;
  transition: color 160ms var(--ease-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1.5px;
  width: 100%;
  background: var(--ink-strong);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease-out);
}
.nav__link:hover {
  color: var(--ink-strong);
}
.nav__link:hover::after {
  transform: scaleX(1);
}
.nav.is-scrolled {
  background: color-mix(in srgb, var(--white) 58%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow:
    0 10px 30px -20px rgba(54, 60, 72, 0.5),
    inset 0 1px 0 var(--glass-edge),
    inset 0 0 0 1px var(--rule-soft);
}

.hero {
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-top: 7rem;
  padding-bottom: 4rem;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.hero__title {
  font-size: var(--t-3xl);
  line-height: 0.98;
  margin-bottom: 1.8rem;
}
.hero__sub {
  font-size: var(--t-lg);
  color: var(--ink-soft);
  max-width: 42ch;
  line-height: 1.55;
  margin-bottom: 2.4rem;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
}
.hero__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}
.lens {
  width: min(86%, 460px);
  aspect-ratio: 1 / 1;
  border-radius: var(--r-xl);
  display: grid;
  place-items: center;
  padding: 12%;
}
.lens__mark {
  width: 46%;
  opacity: 0.9;
  filter: drop-shadow(0 8px 18px rgba(54, 60, 72, 0.18));
}
.lens__ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 2;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    inset 0 2px 3px rgba(255, 255, 255, 0.6);
}
.hero__chip {
  position: absolute;
  padding: 0.7rem 1rem;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--white) 72%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px var(--rule-soft);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.hero__chip strong {
  color: var(--ink-strong);
  font-weight: 600;
  display: block;
}
.hero__chip--1 {
  top: 4%;
  right: -4%;
}
.hero__chip--2 {
  bottom: 6%;
  left: -6%;
}
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sage) 26%, transparent);
  flex: none;
}

.conviction {
  padding-block: 0;
}
.conviction__pin {
  height: 220vh;
}
.conviction__sticky {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: grid;
  align-content: center;
}
.conviction__kicker {
  max-width: 42ch;
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
  color: var(--ink-soft);
  font-size: var(--t-lg);
  line-height: 1.55;
}
.bigline {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--t-2xl);
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.bigline .ln {
  display: block;
  overflow: hidden;
}
.bigline .ln > span {
  display: block;
  transition: transform 0.9s var(--ease-out);
}
.js .bigline .ln > span {
  transform: translateY(105%);
}
.js .bigline .ln.is-in > span {
  transform: none;
}
.bigline .muted {
  color: var(--ink-faint);
}

.rail__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  flex-wrap: wrap;
}
.rail__title {
  font-size: var(--t-xl);
}
.rail__track {
  display: flex;
  gap: clamp(0.8rem, 1.2vw, 1rem);
  padding-inline: var(--gutter);
  padding-bottom: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.rail__track::-webkit-scrollbar {
  display: none;
}

.rail__viewport {
  overflow: hidden;
}
.rail--on .rail__track {
  width: max-content;
  overflow: visible;
  scroll-snap-type: none;
  padding-bottom: 0.75rem;
  cursor: grab;
  user-select: none;
  will-change: transform;
  touch-action: pan-y;
}
.rail--on .rail__track.is-drag {
  cursor: grabbing;
}

.rail--on .pcard {
  transition: box-shadow 0.5s var(--ease-out);
  will-change: transform;
  backface-visibility: hidden;
  transform-origin: center;
}
.rail--on .pcard__ico {
  will-change: transform;
}
.rail--on .pcard:hover {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #fff 55%, transparent),
    0 20px 44px -34px rgba(54, 60, 72, 0.6);
}
@media (prefers-reduced-motion: reduce) {
  .rail--on .pcard {
    transition: none;
  }
  .rail--on .pcard:hover {
    box-shadow: none;
  }
}
.pcard {
  flex: 0 0 clamp(250px, 30vw, 330px);
  scroll-snap-align: start;
  min-height: 360px;
  padding: var(--card-pad);
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--tile, #fff);
  color: var(--tile-ink, var(--ink-strong));
  transition: transform 0.4s var(--ease-out);
}

.pcard:nth-child(7n + 1) {
  --tile: #4d5564;
  --tile-ink: #fff;
  --tile-soft: rgba(255, 255, 255, 0.74);
}
.pcard:nth-child(7n + 2) {
  --tile: #cad7e1;
  --tile-ink: #17171b;
  --tile-soft: #3a4048;
}
.pcard:nth-child(7n + 3) {
  --tile: #9aa797;
  --tile-ink: #14170f;
  --tile-soft: #33382c;
}
.pcard:nth-child(7n + 4) {
  --tile: #c3c8d3;
  --tile-ink: #17171b;
  --tile-soft: #3a4048;
}
.pcard:nth-child(7n + 5) {
  --tile: #9a93a4;
  --tile-ink: #17141b;
  --tile-soft: #34303c;
}
.pcard:nth-child(7n + 6) {
  --tile: #d4dad7;
  --tile-ink: #17171b;
  --tile-soft: #3a4048;
}
.pcard:nth-child(7n + 7) {
  --tile: #363c48;
  --tile-ink: #fff;
  --tile-soft: rgba(255, 255, 255, 0.74);
}
.pcard__idx {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: var(--fw-label);
  letter-spacing: 0.16em;
  color: var(--tile-ink);
  opacity: 0.65;
}
.pcard__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(1.7rem, 2.2vw, 2.15rem);
  line-height: 1;
  margin: 0.8rem 0 0.9rem;
  color: var(--tile-ink);
}
.pcard__desc {
  color: var(--tile-soft);
  font-size: var(--t-sm);
  line-height: 1.55;
}
.pcard__ico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--tile-ink) 12%, transparent);
  display: grid;
  place-items: center;
  margin-top: 1.4rem;
}
.pcard__ico svg {
  width: 18px;
  height: 18px;
  stroke: var(--tile-ink);
}

/* ---- Infrastructure heading + platforms list (two-column editorial) ------- */
.infra2 {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.infra2__intro {
  position: sticky;
  top: clamp(6rem, 14vh, 9rem);
}
.infra__title {
  font-size: var(--t-2xl);
  max-width: 14ch;
  line-height: 1;
  letter-spacing: -0.03em;
}
.infra__lede {
  margin-top: clamp(1.4rem, 3vw, 2rem);
  max-width: 44ch;
}
.infra__line {
  margin-top: clamp(1.1rem, 2.5vw, 1.6rem);
  font-size: var(--t-lg);
  color: var(--ink-soft);
}
.infra__line em {
  font-style: italic;
  font-weight: 400;
  color: var(--lilac);
}

.plist__head {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: clamp(0.4rem, 1.4vw, 0.9rem);
}
.plist__head .eyebrow {
  margin: 0;
  white-space: nowrap;
}
.plist__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule);
}
.plist__items {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* row rhythm scales with viewport HEIGHT, so the heading + all eight rows fit
   one screen even on short (or display-scaled) laptops */
.prow {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 0.82fr) minmax(0, 1.08fr);
  gap: clamp(0.8rem, 2vw, 1.8rem);
  align-items: center;
  padding: clamp(0.55rem, 1.45svh, 1.3rem) clamp(0.4rem, 1vw, 0.9rem);
  border-top: 1px solid var(--rule-soft);
}
.prow:last-child {
  border-bottom: 1px solid var(--rule-soft);
}
.prow__n {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: var(--fw-label);
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  transition: color 0.45s var(--ease-out);
}
.prow__name {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
}
.prow__desc {
  font-size: clamp(1.3rem, 0.6rem + 1.1svh, 1.5rem);
  color: var(--ink-soft);
  line-height: 1.45;
  text-wrap: pretty;
  transition: color 0.45s var(--ease-out);
  /* two lines tall even when the copy is one, so every row shares one rhythm */
  min-height: 2.9em;
  display: flex;
  align-items: center;
}
/* hover (shared with the capability list): the text itself is never
   underlined, so nothing reads as a link. Instead the row's own divider
   hairline darkens, drawing across from the left and, on leave, retreating
   to the right (the transform-origin flips while the line is at zero). */
.prow,
.uh-item {
  position: relative;
}
.prow::after,
.uh-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  pointer-events: none;
  background: color-mix(in srgb, var(--slate) 42%, transparent);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.8s var(--ease-out);
}
.prow:hover::after,
.uh-item:hover::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}
.prow:hover .prow__n {
  color: var(--slate);
}
.prow:hover .prow__desc {
  color: color-mix(in srgb, var(--ink-soft) 70%, var(--ink-strong));
}
@media (prefers-reduced-motion: reduce) {
  .prow::after,
  .uh-item::after {
    transition: opacity 0.3s ease;
    transform: none;
    opacity: 0;
  }
  .prow:hover::after,
  .uh-item:hover::after {
    opacity: 1;
  }
}

/* =========================================================================
   SCENE 4 — PROOF (PEAK). 1M+ = glass signature; rest flat.
   ========================================================================= */
.proof {
  padding-block: 0;
}
/* experts: two white panels carrying dotted art that bleeds off the card edge,
   set on a full-bleed mineral band so the white cards read as lifted objects */
.experts {
  position: relative;
  isolation: isolate;
  padding-block: clamp(4.5rem, 9vw, 7.5rem);
  background:
    radial-gradient(
      70% 90% at 12% 0%,
      color-mix(in srgb, var(--white) 38%, transparent) 0%,
      transparent 60%
    ),
    radial-gradient(
      60% 80% at 92% 100%,
      color-mix(in srgb, var(--blue) 45%, transparent) 0%,
      transparent 65%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--mineral) 88%, var(--white)) 0%,
      var(--mineral) 100%
    );
}
/* same fine grain as the page ground, so the band feels printed, not flat */
.experts::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.experts__title {
  font-size: var(--t-xl);
  margin-bottom: clamp(1.6rem, 3.5vw, 2.6rem);
  color: var(--slate-deep);
}
.experts__foot {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.4rem);
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
  font-size: var(--t-lg);
  color: var(--slate-deep);
}
.experts__foot em {
  font-style: italic;
}
.experts__rule {
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--slate) 32%, transparent);
}
/* stats row under the platforms list: solid brand-colour tiles, white type */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  margin-top: clamp(3rem, 7vw, 5.5rem);
}
.stat {
  border-radius: var(--r-sm);
  padding: clamp(1.4rem, 2.2vw, 2rem);
  min-height: clamp(150px, 15vw, 200px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--stat-bg);
  color: #fff;
}
.stat--lilac {
  --stat-bg: var(--lilac);
}
.stat--lavender {
  --stat-bg: var(--lavender);
}
.stat--slate {
  --stat-bg: var(--slate);
}
.stat__num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-3xl);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: inherit;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.9;
  margin-top: 1.4rem;
}
.expert-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.4vw, 2rem);
}
.epanel {
  position: relative;
  overflow: hidden;
  min-height: clamp(280px, 30vw, 380px);
  border-radius: var(--r);
  background: var(--surface);
  display: flex;
  align-items: center;
  box-shadow:
    0 1px 2px rgba(54, 60, 72, 0.06),
    0 24px 48px -28px rgba(54, 60, 72, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.9);
  /* keeps the [data-reveal] fade-up, adds the shadow for the hover lift */
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.6s var(--ease-out),
    box-shadow 0.6s var(--ease-out);
}
/* chained past .is-in so it outranks the reveal's `transform: none` */
.expert-panels .epanel.is-in:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 2px rgba(54, 60, 72, 0.06),
    0 34px 64px -30px rgba(54, 60, 72, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}
@media (prefers-reduced-motion: reduce) {
  .expert-panels .epanel.is-in:hover {
    transform: none;
  }
}
/* placeholder box that defines where the dotted art lands; the dots themselves are drawn on a canvas covering the whole card (js) */
.epanel__art {
  position: absolute;
  top: 50%;
  height: 82%;
  transform: translateY(-50%);
  pointer-events: none;
  visibility: hidden;
}
.epanel--clinical .epanel__art {
  aspect-ratio: 1067.63 / 931.77;
}
.epanel--arbitration .epanel__art {
  aspect-ratio: 1112.73 / 1075.68;
}
.epanel__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.epanel__copy {
  position: relative;
  z-index: 1;
  max-width: 26ch;
  padding: clamp(1.6rem, 3vw, 2.6rem);
}
.epanel__copy h3 {
  font-size: var(--t-lg);
  line-height: 1.1;
  margin-bottom: 0.9rem;
}
.epanel__copy p {
  color: var(--ink-soft);
  font-size: var(--t-sm);
  line-height: 1.6;
}
.epanel--clinical .epanel__art {
  left: -12%;
}
.epanel--clinical .epanel__copy {
  margin-left: auto;
  margin-right: 8%;
}
.epanel--arbitration .epanel__art {
  right: -12%;
}
.epanel--arbitration .epanel__copy {
  margin-left: 6%;
}

/* =========================================================================
   SCENE 6 — DIFFERENCE + TRUST (flat panels)
   ========================================================================= */
.diff__head {
  max-width: none;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.diff__head h2 {
  font-size: var(--t-2xl);
  max-width: 20ch;
}
.diff__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
}
.dcard {
  padding: var(--card-pad);
  border-radius: var(--r-lg);
  min-height: 250px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--rule-soft);
}
.dcard__k {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: var(--fw-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dcard__t {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--t-lg);
  margin: 1rem 0 0.8rem;
}
.dcard__d {
  color: var(--ink-soft);
  font-size: var(--t-sm);
  line-height: 1.6;
}

.trust {
  margin-top: clamp(3rem, 7vw, 5rem);
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.trust__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--t-lg);
}
.trust__sub {
  color: var(--ink-soft);
  font-size: var(--t-sm);
  margin-top: 0.6rem;
}
.creds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.cred {
  padding: 0.7rem 1rem;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--ink-strong);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--rule-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.cred svg {
  width: 15px;
  height: 15px;
  stroke: var(--sage);
}
.research {
  margin-top: 1.6rem;
  color: var(--ink-soft);
  font-size: var(--t-sm);
  max-width: 52ch;
  line-height: 1.6;
}

/* =========================================================================
   SCENE 7 — CLOSE (silver inverted card, Origin rhythm-break)
   ========================================================================= */
.close {
  padding-block: var(--section);
}
.close__card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-xl);
  padding: clamp(2.6rem, 5.5vw, 5rem);
  text-align: center;
  background: var(--mineral);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 30px 60px -44px rgba(54, 60, 72, 0.45);
  transform-origin: 50% 100%;
  will-change: transform;
}
/* two soft brand-colour light fields ("speed" and "rigor") that start at
   opposite corners and drift together as the card arrives, meeting behind the
   heading at the end of the page (js/site.js). Default CSS = the met state, so
   no-JS and reduced motion get the resolved composition, static. */
.close__fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* soft ellipses sized to the card (not circles, which a short card slices
   into vertical bands); eased multi-stop falloff + blur so no edge ever shows.
   Centred via translate (-50%) so the JS offsets share the same units. */
.close__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  filter: blur(28px);
  will-change: transform, opacity;
}
.close__glow--a {
  width: 56%;
  height: 150%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--sage) 62%, transparent) 0%,
    color-mix(in srgb, var(--sage) 34%, transparent) 45%,
    color-mix(in srgb, var(--sage) 10%, transparent) 75%,
    transparent 100%
  );
  transform: translate3d(-68%, -46%, 0);
}
.close__glow--b {
  width: 56%;
  height: 150%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--blue) 95%, transparent) 0%,
    color-mix(in srgb, var(--blue) 55%, transparent) 45%,
    color-mix(in srgb, var(--blue) 16%, transparent) 75%,
    transparent 100%
  );
  transform: translate3d(-32%, -54%, 0);
}
/* the quiet light that appears only where the two meet */
.close__glow--core {
  width: 40%;
  height: 110%;
  background: radial-gradient(
    closest-side,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 100%
  );
  transform: translate3d(-50%, -50%, 0);
}
.close__body {
  position: relative;
  z-index: 1;
  will-change: transform;
}
/* deliberately quiet: a measured sign-off, not a billboard */
.close__title {
  font-size: clamp(2.2rem, 1rem + 2.6vw, 3.6rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.015em;
  max-width: 26ch;
  margin: 0 auto 2.2rem;
  color: var(--slate-deep);
}
/* each line rises from behind its own mask once, ease-out, no overshoot */
.close__ln {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.close__ln > span {
  display: block;
  transition:
    transform 1.1s var(--ease-out),
    opacity 1.1s var(--ease-out);
}
.close__ln + .close__ln > span {
  transition-delay: 0.12s;
}
.js .close__card:not(.is-in) .close__ln > span {
  transform: translateY(105%);
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .close__card {
    transform: none !important;
  }
  .close__body {
    transform: none !important;
  }
  .js .close__card:not(.is-in) .close__ln > span {
    transform: none;
  }
}
.close__sub {
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  font-size: var(--t-lg);
  max-width: 50ch;
  margin: 0 auto 2.6rem;
  line-height: 1.55;
}
/* 1fr | auto | 1fr: the middle link sits at the true centre whatever the
   widths of the logo and copyright either side */
.footer {
  margin-top: clamp(4rem, 9vw, 7rem);
  padding-top: 2.4rem;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.4rem;
  align-items: center;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
}
.footer > :first-child {
  justify-self: start;
}
.footer > :last-child {
  justify-self: end;
}
@media (max-width: 640px) {
  .footer {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .footer > :first-child,
  .footer > :last-child {
    justify-self: center;
  }
}
.footer__logo {
  height: 24px;
  opacity: 0.7;
}
.footer__links {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
  text-transform: uppercase;
}
.footer__links a:hover {
  color: var(--ink-strong);
}
.footer a[href^="mailto"] {
  color: var(--slate);
}

/* =========================================================================
   SCENE 6b — UNDER THE HOOD (numbered capability list, two columns)
   ========================================================================= */
.underhood {
  position: relative;
  overflow: hidden;
}
/* full-bleed backdrop, breaking out of the .wrap constraint; masked to fade at
   the top and bottom so it dissolves into the page's own ground colour behind
   it instead of showing a hard-edged rectangle — a seamless wash, not a panel */
.underhood__bg {
  /* extended past the section's own top/bottom, fixed px not %: the parallax
     drift (below) scales with viewport height, not this section's height.
     The mask's fade band is CENTRED on the section's own static edge (where
     .underhood's overflow:hidden actually clips) and made wide enough that,
     across the full range the drift can move it, opacity stays pinned near
     zero right at that fixed clip line — a mask offset by a flat margin looks
     right at rest but drifts the fade off the clip line once transformed,
     exposing a hard cut; centering + width absorbs that motion instead. */
  position: absolute;
  inset: -350px 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.8;
  background: url("../assets/gradient.png") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0,
    transparent 420px,
    #000 570px,
    #000 calc(100% - 570px),
    transparent calc(100% - 420px),
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0,
    transparent 420px,
    #000 570px,
    #000 calc(100% - 570px),
    transparent calc(100% - 420px),
    transparent 100%
  );
}
.underhood__inner {
  position: relative;
  z-index: 1;
}
/* top trimmed: the pinned shifts block above already ends with its own space */
.underhood {
  padding-top: clamp(3rem, 6vh, 5rem);
}
.underhood__head {
  max-width: none;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.underhood__head h2 {
  font-size: var(--t-2xl);
  max-width: 18ch;
}
.uh-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(2rem, 6vw, 6rem);
}
.uh-col {
  list-style: none;
  margin: 0;
  padding: 0;
}
.uh-item {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  align-items: baseline;
  gap: 0.6rem;
  padding-block: clamp(1rem, 2vw, 1.35rem);
  border-top: 1px solid var(--rule-soft);
}
.uh-col:first-child .uh-item:first-child,
.uh-col:last-child .uh-item:first-child {
  border-top: 1px solid var(--rule);
}
.uh-item__n {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  transition: color 0.45s var(--ease-out);
}
.uh-item__t {
  font-size: var(--t-lg);
  line-height: 1.35;
  color: var(--ink-strong);
  text-wrap: balance;
}
/* hover: the divider sweep is shared with the platforms list (see .prow::after) */
.uh-item:hover .uh-item__n {
  color: var(--slate-deep);
}

/* =========================================================================
   SCENE 6c — SECURITY & COMPLIANCE (certification + research cards)
   ========================================================================= */
/* trimmed bottom: the pinned shifts block below brings its own top spacing */
.compliance {
  padding-bottom: clamp(3rem, 6vh, 5rem);
}
.compliance__head {
  margin-bottom: clamp(2.4rem, 6vw, 4rem);
}
.compliance__title {
  font-size: var(--t-xl);
  line-height: 1.08;
  max-width: 46ch;
} /* wide enough to sit on two lines at desktop widths */
/* the Trust Center line: a quiet text link, underline deepens and arrow nudges on hover */
/* set in the same mono eyebrow face as "Certifications and accreditations" below */
.compliance__trust {
  margin-top: clamp(1.4rem, 2.8vw, 2rem);
}
.compliance__link {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: var(--fw-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 0.5em;
  background: linear-gradient(var(--rule), var(--rule)) 0 100% / 100% 1px
    no-repeat;
  transition:
    color 0.3s ease,
    background-image 0.3s ease;
}
.compliance__link:hover {
  color: var(--ink-strong);
  background-image: linear-gradient(
    color-mix(in srgb, var(--slate) 60%, transparent),
    color-mix(in srgb, var(--slate) 60%, transparent)
  );
}
.compliance__link .arrow {
  display: inline-block;
  letter-spacing: 0;
}
.compliance__link:hover .arrow {
  transform: translateX(3px);
}
.compliance__sub {
  display: block;
  margin: 0 0 1.4rem;
}
.compliance__sub + * {
  margin-top: 0;
}
.cert-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.6rem, 1.1vw, 0.9rem);
  margin-bottom: clamp(2.6rem, 6vw, 4.2rem);
}
.research-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.6rem, 1.2vw, 0.9rem);
}

/* ---- Logo tiles: the badge fills the container at rest; hovering brings a
   translucent black scrim over it (logo stays dimly visible underneath) as the
   title + description fade in on top ---------------------------------------- */
.ctile {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--r);
  overflow: hidden;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--rule);
  cursor: pointer;
  isolation: isolate;
  transition:
    transform 0.4s var(--ease-out),
    box-shadow 0.45s var(--ease-out);
}
.ctile:hover,
.ctile:focus-visible {
  transform: translateY(-3px);
  box-shadow:
    0 22px 44px -24px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  outline: none;
}
.ctile__logo {
  position: absolute;
  inset: 0;
  transition: transform 0.6s var(--ease-out);
}
/* the image is positioned with explicit top/left/width/height percentages (not
   padding on the wrapper, and not the `inset` shorthand — both mis-size a
   replaced element like <img>): this is the one combination that resolves
   deterministically against the tile's own width/height, so the logo is
   centered on both axes and can never overflow, regardless of its own ratio */
.ctile__logo img {
  position: absolute;
  top: 14%;
  left: 14%;
  width: 72%;
  height: 72%;
  display: block;
  object-fit: contain;
}
/* the Nature wordmark is very wide: narrower box so its visual weight matches the badges */
.ctile__logo--nature img {
  left: 20%;
  width: 60%;
}
/* tiles that are links (Nature) behave like the others, plus a pointer */
a.ctile {
  display: block;
  color: inherit;
  text-decoration: none;
}
.ctile:hover .ctile__logo,
.ctile:focus-visible .ctile__logo {
  transform: scale(1.03);
}
/* semi-transparent black scrim — not fully opaque, so the logo still reads
   faintly through it */
.ctile__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(8, 8, 10, 0.8);
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
  pointer-events: none;
}
.ctile:hover .ctile__scrim,
.ctile:focus-visible .ctile__scrim {
  opacity: 1;
}
.ctile__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12%;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.4s var(--ease-out) 0.05s,
    transform 0.4s var(--ease-out) 0.05s;
}
.ctile:hover .ctile__overlay,
.ctile:focus-visible .ctile__overlay {
  opacity: 1;
  transform: none;
}
.ctile__name {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--t-base);
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 0.4rem;
}
.ctile__cat {
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.4;
  max-width: 22ch;
}
.ctile__meta {
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
}

/* =========================================================================
   SCENE 5 — SHIFTS dynamic circle graphic (scroll-scrubbed + clickable tabs)
   ========================================================================= */
/* the heading lives inside the sticky block itself, so it pins and stays on
   screen together with the graphic instead of scrolling away above it —
   everything reads as one section, sized to fit a single viewport */
/* no section padding: the sticky block's own padding (nav clearance on top,
   leftover viewport height below) already spaces it from its neighbours */
#shifts {
  padding-block: 0;
}
.sg__pin {
  position: relative;
  height: 220vh;
}
.sg__sticky {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(1.6rem, 3.5vw, 2.6rem);
  padding-block: clamp(6.5rem, 13vh, 9rem) clamp(1.5rem, 4vh, 3rem);
}
.sg__head {
  max-width: 62ch;
}
.sg__head h2 {
  font-size: var(--t-xl);
  max-width: 22ch;
  line-height: 1.05;
  margin-bottom: 0.8rem;
}
.sg__head .lede {
  font-size: var(--t-base);
  max-width: 58ch;
}
.sg__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: center;
}
/* capped to the ring's own display size (not the full grid column width) so
   aspect-ratio doesn't inflate this box — and with it, the whole row — far
   beyond what's actually visible */
/* sized to sit level with the tabs + card on the right; the vh term keeps the
   pinned block inside one viewport on shorter laptop screens */
.sg__viz {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 450px, 50svh);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}
/* soft lift so the white rings hold their shape on the near-white page */
.sg__rings {
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 14px 28px rgba(54, 60, 72, 0.12))
    drop-shadow(0 1px 2px rgba(54, 60, 72, 0.08));
}
/* unselected bands are plain white; the active one fills with its colour */
.sg__band {
  --c: var(--sage);
  cursor: pointer;
  stroke: #fff;
  transition: stroke 0.5s var(--ease-out);
}
.sg__band[data-i="1"] {
  --c: var(--blue);
}
.sg__band[data-i="2"] {
  --c: var(--lilac);
}
.sg__band:hover {
  stroke: color-mix(in srgb, var(--c) 22%, #fff);
}
.sg__band.is-on {
  stroke: var(--c);
}
.sg__blabel {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 8px;
  letter-spacing: 0.02em;
  fill: var(--ink-soft);
  transition: fill 0.5s var(--ease-out);
}
.sg__blabel:hover {
  fill: var(--ink-strong);
}
.sg__blabel.is-on[data-i="0"],
.sg__blabel.is-on[data-i="2"] {
  fill: #fff;
}
.sg__blabel.is-on[data-i="1"] {
  fill: var(--ink-strong);
}
.sg__panel {
  position: relative;
}
.sg__tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.sg__tab {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: var(--fw-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.7em 1.2em;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--rule);
  transition:
    transform 0.16s var(--ease-out),
    color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}
.sg__tab:hover {
  transform: translateY(-1px);
  color: var(--ink-strong);
}
.sg__cards {
  position: relative;
  min-height: clamp(280px, 34vh, 340px);
}
.sg__card {
  position: absolute;
  inset: 0;
  border-radius: var(--r-xl);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sg__card.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.sg__card--1 {
  background: var(--sage);
  color: #fff;
}
.sg__card--2 {
  background: var(--blue);
  color: var(--ink-strong);
}
.sg__card--3 {
  background: var(--lilac);
  color: #fff;
}
.sg__kicker {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: var(--fw-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-bottom: 1rem;
}
.sg__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--t-xl);
  line-height: 1.02;
  margin-bottom: 1rem;
  color: inherit;
}
.sg__body {
  font-size: var(--t-base);
  line-height: 1.6;
  opacity: 0.92;
  max-width: 46ch;
}

/* =========================================================================
   SCENE 7pre — RediMinds particle brand card
   ========================================================================= */
.brandburst {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.4rem, 2vw, 1rem);
}
.ptext {
  position: relative;
  width: 100%;
  height: clamp(190px, 30vw, 380px);
  touch-action: none;
  isolation: isolate;
}
.ptext canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.ptext__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.brandburst__tag {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 58%, transparent);
  margin: 0;
}
/* RediMinds wordmark sitting inside the closing card, between heading and CTA */
.close__brand {
  height: clamp(110px, 15vw, 220px);
  margin: clamp(1.2rem, 3vw, 2.4rem) auto;
}

/* =========================================================================
   SCENE 6d — A HIGHER STANDARD (full-bleed blue band + dotted-liver field)
   ========================================================================= */
.standards {
  position: relative;
  overflow: hidden;
  padding-top: clamp(4rem, 9vw, 7rem);
  padding-bottom: clamp(6rem, 10vw, 9rem);
}
/* homepage only: the case studies intro follows straight on from the liver fade */
.standards + .csh {
  padding-top: clamp(1.5rem, 3vw, 3rem);
}
.standards__inner {
  position: relative;
  z-index: 1;
}
.standards__title {
  font-size: var(--t-2xl);
  max-width: 22ch;
  letter-spacing: -0.025em;
  color: var(--slate-deep);
}
.standards__lede {
  margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
  max-width: 68ch;
  font-size: var(--t-lg);
  line-height: 1.55;
  color: color-mix(in srgb, var(--slate-deep) 88%, transparent);
}
.standards__grid {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid color-mix(in srgb, var(--slate) 24%, transparent);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.scol {
  padding: 0 clamp(1.5rem, 3vw, 3rem);
}
.scol:first-child {
  padding-left: 0;
}
.scol:last-child {
  padding-right: 0;
}
.scol:not(:last-child) {
  border-right: 1px solid color-mix(in srgb, var(--slate) 20%, transparent);
}
.scol__k {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: var(--fw-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--slate) 85%, transparent);
}
.scol__t {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: clamp(0.9rem, 2vw, 1.3rem) 0;
  color: var(--slate-deep);
}
.scol__d {
  font-size: var(--t-sm);
  line-height: 1.65;
  color: color-mix(in srgb, var(--slate-deep) 78%, transparent);
}
/* dotted-liver particle field: a square box (the liver is roughly square)
   pushed off the bottom-left so only part of the organ shows: ~35% is cut by
   the viewport edge, ~30% hangs below the section. The mask fades the dots out
   just above that bottom clip line so it never reads as a hard cut */
.standards__liver {
  --s: min(64vw, 760px);
  --drop: calc(var(--s) * 0.3);
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: var(--s);
  height: var(--s);
  left: calc(var(--s) * -0.35);
  bottom: calc(-1 * var(--drop));
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0,
    #000 calc(100% - var(--drop) - 140px),
    transparent calc(100% - var(--drop))
  );
  mask-image: linear-gradient(
    180deg,
    #000 0,
    #000 calc(100% - var(--drop) - 140px),
    transparent calc(100% - var(--drop))
  );
}
.standards__liver canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 900px) {
  :root {
    --section: clamp(4.5rem, 10vh, 8rem);
  }
  .nav__link:not(.nav__link--contact) {
    display: none;
  }
  .hero__grid {
    grid-template-columns: 1fr;
  }
  .hero__stage {
    max-width: 400px;
    margin-inline: auto;
    order: -1;
  }
  .hero__title {
    font-size: var(--t-2xl);
  }
  .stats {
    grid-template-columns: 1fr;
  }
  .stat {
    min-height: 130px;
    padding: 1.7rem;
  }
  .expert-panels,
  .diff__grid,
  .trust {
    grid-template-columns: 1fr;
  }
  .epanel {
    min-height: 300px;
  }
  .epanel--clinical .epanel__copy {
    margin-right: 4%;
    max-width: 20ch;
  }
  .epanel__canvas {
    opacity: 0.55;
  }
  .uh-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .uh-col:last-child .uh-item:first-child {
    border-top: 1px solid var(--rule-soft);
  }
  .cert-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .research-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .sg__pin {
    height: 280vh;
  }
  .sg__sticky {
    padding-block: clamp(6rem, 14vh, 8rem) 1.5rem;
  }
  .sg__grid {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 5vw, 2.5rem);
  }
  .sg__viz {
    max-width: 240px;
    margin-inline: auto;
  }
  .infra2 {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 6vw, 3rem);
  }
  .infra2__intro {
    position: static;
  }
  .infra__title {
    font-size: var(--t-xl);
    max-width: 20ch;
  }
  .infra__lede {
    max-width: none;
  }
  .prow {
    grid-template-columns: 2.4rem 1fr;
    row-gap: 0.35rem;
    gap: 0.8rem;
  }
  .prow__desc {
    grid-column: 2;
    font-size: var(--t-sm);
    min-height: 0;
  }
  .prow__name {
    font-size: 1.75rem;
  }
  .standards__grid {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 6vw, 3rem);
  }
  .scol {
    padding: 0;
  }
  .scol:not(:last-child) {
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--slate) 18%, transparent);
    padding-bottom: clamp(2rem, 6vw, 3rem);
  }
  .standards__liver {
    --s: 115vw;
    opacity: 0.7;
  }
  .conviction__pin {
    height: 170vh;
  }
  .bigline {
    font-size: clamp(2rem, 8vw, 2.8rem);
  }
  .proof__pin {
    height: auto;
  }
  .proof__sticky {
    position: static;
    min-height: 0;
    padding-block: 0 var(--section);
  }
}
@media (max-width: 560px) {
  .hero__chip {
    display: none;
  }
  .close__card {
    padding: 2.2rem 1.4rem;
  }
  .cert-grid,
  .research-grid {
    grid-template-columns: 1fr 1fr;
  }
  .uh-item__t {
    font-size: var(--t-base);
  }
}

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition-duration: 0.4s;
  }
  .js .bigline .ln > span {
    transform: none;
  }
  .ground__blob {
    display: none;
  }
  .refract {
    filter: none;
  }
  .sheen {
    display: none;
  }
  .conviction__pin,
  .proof__pin {
    height: auto;
  }
  .conviction__sticky,
  .proof__sticky {
    position: static;
    min-height: 0;
    padding-block: var(--section);
  }
  /* the hero backdrop isn't scroll-faded under reduced motion, so keep it in the
     hero (absolute) rather than a persistent fixed overlay */
  .hero3d__bg {
    position: absolute;
  }
  /* shifts graphic: unpin and stack all three cards so the content is fully
     readable without scroll-scrubbing */
  .sg__pin {
    height: auto;
  }
  .sg__sticky {
    position: static;
    min-height: 0;
    display: block;
    padding-top: clamp(2rem, 5vh, 4rem);
  }
  .sg__cards {
    position: static;
    min-height: 0;
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
  }
  .sg__card {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* =========================================================================
   SCENE 1 — 3D CRYSTAL SCROLL SCENE
   A Three.js glass logo pinned for the length of the scene: the hero copy
   fades out, the crystal glides to centre + scales up, then a reveal panel
   slides in from the right. One scroll value drives all of it (js/site.js).
   ========================================================================= */
.hero3d {
  position: relative;
}
/* hero is one screen tall and scrolls away normally (no pin), so it flows
   straight into the cards; the heart scatter is driven by the page scroll */
.hero3d__pin {
  position: relative;
  height: 100svh;
}
.hero3d__sticky {
  position: relative;
  height: 100svh;
  overflow: hidden;
}

/* File gradient backdrop — full-bleed behind the crystal, shown exactly as the
   source file (no overlay, so the clean sage gradient stays crisp). JS scrubs
   its opacity down as the scene scrolls, so the hero's green world dissolves
   into the site's lilac ground. */
.hero3d__bg {
  /* full-viewport fixed backdrop: it simply fades out (opacity, driven by JS) as
     you scroll, crossfading into the section below with no edge or seam. */
  /* oversized a touch so the source files' edge lines sit off-screen */
  position: fixed;
  inset: -2%;
  z-index: 0;
  pointer-events: none;
  background: url("../assets/hero-bg-00.webp") center / cover no-repeat;
  will-change: opacity;
}
/* per-visit gradient, chosen by the inline script in <head>; only the matched
   rule's image is ever downloaded */
html[data-hero-bg="01"] .hero3d__bg {
  background-image: url("../assets/hero-bg-01.webp");
}
/* 02's dark diagonal is scaled up and anchored left so the light field covers
   the copy column */
html[data-hero-bg="02"] .hero3d__bg {
  background-image: url("../assets/hero-bg-02.webp");
  background-size: max(135%, 240svh) auto;
  background-position: 0% 18%;
}
html[data-hero-bg="04"] .hero3d__bg {
  background-image: url("../assets/hero-bg-04.webp");
}
html[data-hero-bg="05"] .hero3d__bg {
  background-image: url("../assets/hero-bg-05.webp");
}

/* dark gradient: white type, nav and logo while the nav is still transparent
   over the hero; once the frosted nav bar appears it returns to dark ink */
html[data-hero-tone="dark"] .hero3d__copy .hero__title {
  color: #fff;
}
html[data-hero-tone="dark"] .hero3d__copy .hero__sub {
  color: rgba(255, 255, 255, 0.8);
}
html[data-hero-tone="dark"] .hero3d__copy .btn--primary {
  background: #fff;
  color: var(--ink-strong);
}
html[data-hero-tone="dark"] .hero3d__copy .btn--primary:hover {
  background: var(--mineral);
}
.nav__link,
.nav__logo--mark {
  transition:
    color 0.4s var(--ease-out),
    filter 0.4s var(--ease-out);
}
html[data-hero-tone="dark"] .nav:not(.is-scrolled) .nav__link {
  color: rgba(255, 255, 255, 0.86);
}
html[data-hero-tone="dark"] .nav:not(.is-scrolled) .nav__link:hover {
  color: #fff;
}
html[data-hero-tone="dark"] .nav:not(.is-scrolled) .nav__link::after {
  background: #fff;
}
html[data-hero-tone="dark"] .nav:not(.is-scrolled) .nav__logo {
  filter: brightness(0) invert(1);
}

/* dotted heart: a fixed, full-viewport layer beneath the hero copy, so its dots
   can scatter out past the hero and dissolve over the next section. Tinted in
   a muted brand colour so it supports the headline rather than competing. */
.hero3d__canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100svh;
  display: block;
  z-index: 1;
  pointer-events: none;
}

/* graceful fallback if WebGL / three fail to load */
.hero3d__fallback {
  display: none; /* only shown by JS if the particle field can't run — avoids a flash on load */
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 8%;
  height: min(64%, 560px);
  width: auto;
  transform: translateY(-50%);
  opacity: 0.85;
}

/* Hero copy */
.hero3d__copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 4rem;
  pointer-events: none;
  will-change: opacity, transform;
}
.hero3d__copy > * {
  pointer-events: auto;
}
.hero3d__copy .hero__label {
  margin-bottom: 1rem;
}
.hero3d__copy .hero__title {
  font-size: var(--t-3xl);
  line-height: 0.98;
  margin-bottom: 1.6rem;
  max-width: 12ch;
}
.hero3d__copy .hero3d__copy .hero__sub {
  font-size: var(--t-lg);
  color: var(--ink-soft);
  max-width: 40ch;
  line-height: 1.55;
  margin-bottom: 2.2rem;
}
.hero3d__copy .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
}

/* Reveal panel */
.hero3d__reveal {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline: var(--gutter);
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
/* readability scrim behind the reveal text — faded on exit so it never seams,
   independently of the text itself (which scrolls away normally) */
.hero3d__reveal-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 6%,
    color-mix(in srgb, var(--canvas) 55%, transparent) 34%,
    color-mix(in srgb, var(--canvas) 88%, transparent) 62%
  );
}
.hero3d__reveal-inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
}
.hero3d__reveal .conviction__kicker {
  margin-bottom: clamp(1.4rem, 3.5vh, 2.4rem);
}

/* Nudge the hero copy toward centre so it doesn't hug the left edge.
   Desktop/laptop only — the mobile stacked layout keeps its own padding below. */
@media (min-width: 901px) {
  .hero3d__copy {
    padding-left: clamp(1rem, 5vw, 6rem);
  }
}

@media (max-width: 900px) {
  .hero3d__pin {
    height: 100svh;
  }
  .hero3d__copy {
    padding-top: 5.5rem;
  }
  .hero3d__copy .hero__title {
    font-size: var(--t-2xl);
    max-width: 14ch;
  }
  .hero3d__reveal {
    align-items: flex-end;
    padding-bottom: clamp(3rem, 10vh, 6rem);
  }
  .hero3d__reveal-scrim {
    background: linear-gradient(
      180deg,
      transparent 30%,
      color-mix(in srgb, var(--canvas) 70%, transparent) 62%,
      color-mix(in srgb, var(--canvas) 94%, transparent) 100%
    );
  }
  .hero3d__reveal-inner {
    max-width: none;
  }
  .hero3d__fallback {
    right: 50%;
    transform: translate(50%, -50%);
    width: min(48%, 240px);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* nothing scroll-fades here, so the backdrop and organ stay inside a static
     one-screen hero instead of being fixed behind the whole page */
  .hero3d__pin {
    height: 100svh;
  }
  .hero3d__sticky {
    position: relative;
    height: 100svh;
    overflow: hidden;
  }
  .hero3d .hero3d__bg {
    position: absolute;
  }
  .hero3d .hero3d__canvas {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .hero3d__reveal {
    position: static;
    opacity: 1;
    background: none;
    justify-content: flex-start;
    padding-block: var(--section);
  }
  .ctile,
  .ctile__logo,
  .ctile__scrim,
  .ctile__overlay {
    transition-duration: 0.15s;
    transition-delay: 0s;
  }
}
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.45s;
  animation-timing-function: var(--ease-out);
}

.nav__link.is-current {
  color: var(--ink-strong);
}
.nav__link.is-current::after {
  transform: scaleX(1);
}

.ct-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(10rem, 22vh, 15rem) 0 clamp(5rem, 11vh, 8rem);
}
/* the home hero's mineral gradient, dissolving into the page ground below */
.ct-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
  background: url("../assets/hero-bg-01.webp") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 45%,
    transparent 100%
  );
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
}
.ct-hero__art {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  right: 0;
  top: 0;
  width: min(56vw, 820px);
  height: 100%;
}
.ct-hero__inner {
  position: relative;
  z-index: 1;
}
.ct-kicker {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(1.6rem, 3vh, 2.2rem);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
}
.ct-kicker__rule {
  width: 2.6rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.ct-hero__title {
  font-size: var(--t-3xl);
  line-height: 0.95;
  letter-spacing: -0.035em;
}
.ct-hero__lede {
  margin-top: clamp(1.2rem, 2.6vh, 1.8rem);
  font-size: var(--t-lg);
  color: var(--ink-soft);
  max-width: 40ch;
}

.ct-body {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
  padding-top: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid var(--rule);
}
.ct-details {
  display: grid;
  gap: clamp(2rem, 4vh, 2.8rem);
  padding-top: clamp(0.6rem, 2vw, 1.4rem);
  position: sticky;
  top: clamp(7rem, 15vh, 9rem);
}
.ct-detail {
  display: grid;
  gap: 0.8rem;
}
.ct-detail address {
  font-style: normal;
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--ink-strong);
}
.ct-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ct-optional {
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--ink-faint);
  font-size: 0.95em;
}
/* same hairline language as the lists: the rule under a link deepens on hover */
.ct-link {
  justify-self: start;
  font-size: var(--t-base);
  color: var(--ink-strong);
  padding-bottom: 0.25em;
  background: linear-gradient(var(--rule), var(--rule)) 0 100% / 100% 1px
    no-repeat;
  transition:
    background-size 0.6s var(--ease-out),
    color 0.3s ease;
}
.ct-link::after {
  content: none;
}
.ct-link:hover {
  background-image: linear-gradient(
    color-mix(in srgb, var(--slate) 60%, transparent),
    color-mix(in srgb, var(--slate) 60%, transparent)
  );
}

.ct-card {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: clamp(1.8rem, 3.6vw, 3.2rem);
  box-shadow:
    0 1px 2px rgba(54, 60, 72, 0.06),
    0 30px 60px -34px rgba(54, 60, 72, 0.34),
    inset 0 0 0 1px rgba(54, 60, 72, 0.06);
}
.ct-form {
  display: grid;
  gap: clamp(1.4rem, 2.6vh, 1.9rem);
}
.ct-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.6rem);
}
.ct-field {
  display: grid;
  gap: 0.8rem;
}
.ct-input {
  width: 100%;
  font: inherit;
  font-size: var(--t-base);
  color: var(--ink-strong);
  padding: 1.1rem 1.3rem;
  border-radius: 10px;
  border: 0;
  outline: none;
  background: color-mix(in srgb, var(--slate) 4%, var(--white));
  box-shadow: inset 0 0 0 1px var(--rule);
  transition:
    box-shadow 0.25s var(--ease-out),
    background 0.25s var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.ct-input:hover {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--slate) 30%, transparent);
}
.ct-input:focus-visible,
.ct-input:focus {
  background: var(--white);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--slate) 70%, transparent),
    0 0 0 4px color-mix(in srgb, var(--slate) 10%, transparent);
}
.ct-input--area {
  min-height: 15rem;
  resize: vertical;
  line-height: 1.55;
}
.ct-field.is-invalid .ct-input {
  box-shadow:
    inset 0 0 0 1px #b4675d,
    0 0 0 4px rgba(180, 103, 93, 0.1);
}
.ct-error {
  min-height: 0;
  font-size: var(--t-xs);
  color: #9c544b;
  line-height: 1.3;
}
.ct-error:empty {
  display: none;
}
.ct-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ct-actions {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding-top: 0.4rem;
}
.ct-submit {
  position: relative;
  padding: 1.05em 1.6em;
}
/* press feedback lands on pointer-down, not release */
.ct-submit:active {
  transform: scale(0.97);
  transition-duration: 100ms;
}
.ct-spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.6rem;
  height: 1.6rem;
  margin: -0.8rem 0 0 -0.8rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-top-color: #fff;
  opacity: 0;
  animation: ct-spin 0.8s linear infinite paused;
}
.ct-submit.is-busy {
  pointer-events: none;
}
.ct-submit.is-busy .ct-submit__label,
.ct-submit.is-busy .arrow {
  opacity: 0;
}
.ct-submit.is-busy .ct-spinner {
  opacity: 1;
  animation-play-state: running;
}
.ct-submit__label,
.ct-submit .arrow {
  transition:
    opacity 0.2s ease,
    transform 180ms var(--ease-out);
}
@keyframes ct-spin {
  to {
    transform: rotate(360deg);
  }
}

/* completion: the form gives way to a calm confirmation in the same card */
.ct-form,
.ct-done {
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out),
    filter 0.5s var(--ease-out);
}
.ct-card.is-leaving .ct-form {
  opacity: 0;
  transform: translateY(-8px);
  filter: blur(4px);
}
.ct-done {
  display: grid;
  justify-items: start;
  gap: 1.2rem;
  padding-block: clamp(2rem, 6vh, 4rem);
}
.ct-done[hidden],
.ct-form[hidden] {
  display: none;
}
.ct-done.is-entering {
  opacity: 0;
  transform: translateY(10px);
  filter: blur(4px);
}
.ct-done__mark {
  width: 5.2rem;
  height: 5.2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--sage) 22%, var(--white));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sage) 40%, transparent);
}
.ct-done__mark svg {
  width: 2.4rem;
  height: 2.4rem;
  fill: none;
  stroke: color-mix(in srgb, var(--sage) 70%, var(--ink-strong));
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 0.7s var(--ease-out) 0.25s;
}
.ct-done:not(.is-entering) .ct-done__mark svg {
  stroke-dashoffset: 0;
}
.ct-done__title {
  font-size: var(--t-xl);
}
.ct-done__text {
  color: var(--ink-soft);
  font-size: var(--t-base);
  max-width: 46ch;
}
.ct-again {
  margin-top: 0.6rem;
}

.page-contact .footer {
  margin-top: clamp(5rem, 10vw, 8rem);
}

@media (max-width: 900px) {
  .ct-hero {
    padding-top: clamp(8rem, 18vh, 11rem);
  }
  .ct-hero__title {
    font-size: var(--t-2xl);
  }
  .ct-hero__art {
    width: 90vw;
    opacity: 0.6;
  }
  .ct-body {
    grid-template-columns: 1fr;
  }
  .ct-details {
    position: static;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
}
@media (max-width: 560px) {
  .ct-row {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ct-form,
  .ct-done,
  .ct-done__mark svg {
    transition-duration: 0.2s;
    transform: none !important;
    filter: none !important;
  }
  .ct-submit:active {
    transform: none;
  }
}

/* =========================================================================
   SCENE 4b — HOW A CASE MOVES (dark band, ported 1:1 from the "black
   section" reference: px values, colours and type kept as designed there)
   ========================================================================= */
.cm {
  --cm-heading:
    "Space Grotesk", ui-sans-serif, sans-serif; /* the reference's label face */
  --cm-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  position: relative;
  background: #1f2125;
  color: #fff;
  font-family: var(--font-text);
}
.cm__head {
  max-width: 1240px;
  margin: 0 auto;
  padding: 140px 40px 40px;
}
.cm__kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  font-family: var(--cm-heading);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c2c7d4;
}
.cm__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #99a696;
}
.cm__title {
  margin: 0;
  max-width: 760px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
  color: #fff;
}
.cm__title i {
  font-style: normal;
  color: #cad7e1;
} /* upright, keeps the soft blue accent */
.cm__body {
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 40px 140px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
}

.cm-step {
  min-height: 68vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  opacity: 0.32;
  transition: opacity 0.25s ease;
}
.cm-step.is-on {
  opacity: 1;
}
.cm-step__k {
  font-family: var(--cm-heading);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #99a696;
}
.cm-step__t {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.cm-step__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #3a3e45;
}
.cm-step__item {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #3a3e45;
  font-size: 15px;
  line-height: 1.5;
  color: #e4e7ec;
}
.cm-step__item > span {
  flex: none;
  width: 18px;
  padding-top: 4px;
  font-family: var(--cm-heading);
  font-size: 11px;
  color: #9994a3;
}

.cm__rail {
  position: relative;
}
.cm__sticky {
  position: sticky;
  top: 120px;
  padding-top: 12vh;
}
.cm-win {
  background: #2a2d33;
  border: 1px solid #3a3e45;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
}
.cm-win__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #3a3e45;
}
.cm-win__id {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.cm-win__id img {
  height: 13px;
  width: auto;
  opacity: 0.85;
}
.cm-win__sep {
  width: 1px;
  height: 14px;
  background: #3a3e45;
}
.cm-win__prog {
  display: flex;
  gap: 4px;
  flex: none;
}
.cm-win__prog span {
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: #3a3e45;
  transition: background 0.25s;
}
.cm-win__prog span.is-on {
  background: #cad7e1;
}
.cm-win__stage {
  position: relative;
  height: 440px;
}
.cm-mono {
  font-family: var(--cm-mono);
  font-size: 12px;
  color: #c2c7d4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cm-sage {
  color: #99a696;
}
.cm-cap {
  font-family: var(--cm-heading);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c2c7d4;
}

/* the four case views share the stage; the active one cross-fades in */
.cm-panel {
  position: absolute;
  inset: 0;
  padding: 22px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0s linear 0.3s;
}
.cm-panel.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}

.cm-sources {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.cm-src {
  border: 1px solid #3a3e45;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #24272c;
}
.cm-src .cm-cap {
  font-size: 10.5px;
}
.cm-src__n {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.01em;
  color: #fff;
}
.cm-src__bar {
  height: 3px;
  border-radius: 2px;
  background: #3a3e45;
  overflow: hidden;
  display: block;
}
.cm-src__bar > span {
  display: block;
  height: 100%;
  background: #99a696;
}
.cm-split {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.cm-docs {
  display: flex;
  flex-direction: column;
  border: 1px solid #3a3e45;
  border-radius: 8px;
}
.cm-doc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid #33363d;
  font-size: 13px;
}
.cm-doc:last-child {
  border-bottom: 0;
}
.cm-doc__name {
  color: #e4e7ec;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cm-tag {
  font-family: var(--cm-mono);
  font-size: 11px;
  color: #c2c7d4;
  border: 1px solid #474b53;
  border-radius: 4px;
  padding: 2px 7px;
}
.cm-doc__pp {
  font-family: var(--cm-mono);
  font-size: 11px;
  color: #9994a3;
  width: 64px;
  text-align: right;
}
.cm-status {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #c2c7d4;
}
.cm-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #99a696;
  animation: cmPulse 1.6s ease-in-out infinite;
}
@keyframes cmPulse {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

.cm-ev {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px;
  height: 100%;
}
.cm-tl {
  display: flex;
  flex-direction: column;
}
.cm-tl__cap {
  margin-bottom: 14px;
}
.cm-tl__e {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 12px;
  padding: 0 0 16px;
}
.cm-tl__d {
  font-family: var(--cm-mono);
  font-size: 11px;
  color: #9994a3;
  padding-top: 2px;
}
.cm-tl__b {
  border-left: 1px solid #474b53;
  padding-left: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: #e4e7ec;
}
.cm-cite {
  align-self: flex-start;
  font-family: var(--cm-mono);
  font-size: 10.5px;
  color: #cad7e1;
  background: rgba(202, 215, 225, 0.1);
  border-radius: 4px;
  padding: 2px 6px;
}
.cm-srcdoc {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #24272c;
  border: 1px solid #3a3e45;
  border-radius: 8px;
  padding: 12px;
}
.cm-srcdoc__lines {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cm-srcdoc__lines span {
  height: 5px;
  border-radius: 3px;
  background: #3a3e45;
}
.cm-srcdoc__lines span.is-hl {
  background: #cad7e1;
  opacity: 0.8;
}
.cm-ask {
  margin-top: auto;
  border-top: 1px solid #3a3e45;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cm-ask__l {
  font-size: 12px;
  color: #c2c7d4;
}
.cm-ask__q {
  font-size: 12px;
  line-height: 1.45;
  color: #e4e7ec;
  background: #2f3239;
  border-radius: 6px;
  padding: 8px;
}

.cm-flag {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid #3a3e45;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: #e4e7ec;
}
.cm-flag__k {
  font-family: var(--cm-mono);
  font-size: 10.5px;
  line-height: 1.6;
  color: #242424;
  border-radius: 4px;
  padding: 2px 7px;
}
.cm-match {
  margin-top: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  background: #24272c;
  border: 1px solid #3a3e45;
  border-radius: 8px;
}
.cm-match__av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #4d5564;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
}
.cm-match__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: #fff;
}
.cm-match__who span + span {
  font-size: 12px;
  color: #c2c7d4;
}
.cm-match__v {
  font-size: 10.5px;
}

.cm-det {
  padding: 18px;
  border: 1px solid #474b53;
  border-radius: 10px;
  background: #24272c;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cm-det__t {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: -0.01em;
  color: #fff;
}
.cm-det__d {
  font-size: 13px;
  line-height: 1.5;
  color: #c2c7d4;
}
.cm-audit__cap {
  margin-top: 6px;
}
.cm-audit {
  display: flex;
  flex-direction: column;
}
.cm-audit__r {
  display: grid;
  grid-template-columns: 62px 10px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 7px 0;
  font-size: 13px;
  color: #e4e7ec;
}
.cm-audit__t {
  font-family: var(--cm-mono);
  font-size: 11px;
  color: #9994a3;
}
.cm-audit__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.cm-inline {
  display: none;
}
@media (max-width: 900px) {
  .cm__head {
    padding: 96px var(--gutter) 24px;
  }
  .cm__body {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 var(--gutter) 96px;
  }
  .cm__rail {
    display: none;
  }
  .cm-step {
    min-height: 0;
    opacity: 1;
    padding: 40px 0;
  }
  .cm-step__t {
    font-size: 26px;
  }
  .cm-inline {
    display: block;
    margin-top: 10px;
  }
  .cm-inline .cm-win__stage {
    height: auto;
  }
  .cm-inline .cm-panel {
    position: static;
    opacity: 1;
    visibility: visible;
  }
  .cm-inline .cm-panel:not(.is-on) {
    display: none;
  }
  .cm-inline .cm-ev {
    grid-template-columns: 1fr;
  }
  .cm-inline .cm-win__id .cm-mono {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cm-step,
  .cm-panel,
  .cm-win__prog span {
    transition: none;
  }
  .cm-pulse {
    animation: none;
    opacity: 0.8;
  }
}
.nav.is-on-dark.is-scrolled {
  background: color-mix(in srgb, #1f2125 62%, transparent);
  box-shadow:
    0 10px 30px -20px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.nav.is-on-dark .nav__link {
  color: rgba(255, 255, 255, 0.72);
}
.nav.is-on-dark .nav__link:hover {
  color: #fff;
}
.nav.is-on-dark .nav__link::after {
  background: #fff;
}
.nav.is-on-dark .nav__logo {
  filter: brightness(0) invert(1);
}

/* logo tiles that link out: the caption's arrow slides in with the overlay */
.ctile__arrow {
  display: inline-block;
  margin-left: 0.3em;
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity 0.35s var(--ease-out) 0.12s,
    transform 0.45s var(--ease-out) 0.12s;
}
.ctile:hover .ctile__arrow,
.ctile:focus-visible .ctile__arrow {
  opacity: 1;
  transform: none;
}