/* ── The Camouflage Test – product page ───────────────────────
   The Outside-In's body (ladder, statements, price close), with its own
   hero: the camouflage in full, and the title inside it. All values from
   tokens. The darker orange of the ground is --color-orange-hover, as on
   the homepage beat: no new colour. */

/* ── Hero ──────────────────────────────────────────────────────── */
/* Pinned: it holds still and the body scrolls up over it. Everything after
   it in main sits higher in the stack, on its own opaque ground. */
.ct-hero {
  position: sticky;
  top: 0;
  z-index: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: var(--space-md) var(--pad-h);
  background-color: var(--color-orange-hover);
}

.ct-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Two cuts of the composition: wide for landscape, tall for portrait, so
   the shapes cross the title in the same places at every shape of screen */
.ct-art--tall {
  display: none;
}

@media (max-aspect-ratio: 1/1) {
  .ct-art--wide { display: none; }
  .ct-art--tall { display: block; }
}

.ct-ground {
  fill: var(--color-orange-hover);
}

.ct-shape {
  fill: var(--color-orange);
}

.ct-mask-shape {
  fill: var(--color-white);
}

.ct-dot {
  fill: var(--color-ink);
  shape-rendering: crispEdges;
}

/* The logotype, top left, the way home. Same place and size as the nav
   logo on The Outside-In. White all through: the orange hyphen would
   vanish into the ground. It rides with the pinned hero, so the body
   covers it on the way down. */
.ct-logo {
  position: absolute;
  top: 20px;
  left: var(--pad-h);
  z-index: 2;
  display: inline-flex;
  transition: opacity 0.2s ease;
}

.ct-logo img {
  display: block;
  height: clamp(20px, 2.1vw, 26px);
  width: auto;
  filter: brightness(0) invert(1);
}

.ct-logo:hover {
  opacity: 0.7;
}

@media (min-width: 768px) {
  .ct-logo {
    top: 28px;
  }
}

/* The title. Orange on orange: it reads against the ground and the dots,
   and goes where a bright shape crosses it. Live text, so the camouflage
   is colour only. */
.ct-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(54px, 15.5vw, 300px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--color-orange);
  text-align: center;
}

.ct-title-line {
  display: block;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

.ct-title-line.visible {
  opacity: 1;
  transform: translateY(0);
}

/* The and Test sit smaller, either side of the word that matters */
.ct-title-line--small {
  font-size: 0.7em;
}

.ct-page main > section {
  position: relative;
  z-index: 1;
}

/* ── The turn ─────────────────────────────────────────────────── */
.ct-turn {
  padding-top: var(--space-lg);
}

.ct-page .sb-ways .sb-ways-title + .sb-copy {
  margin-top: 0;
}

/* ── Close: the onward line to The Outside-In ─────────────────── */
.ct-onward {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--color-white);
  opacity: 0.75;
  max-width: 44ch;
  margin: var(--space-md) auto 0;
}

.ct-onward a {
  color: var(--color-orange);
  text-underline-offset: 0.2em;
}

.ct-onward a:hover {
  color: var(--color-white);
}

@media (prefers-reduced-motion: reduce) {
  .ct-title-line {
    opacity: 1;
    transform: none;
    transition: none;
  }
}