/* Solace: an immersive case study. Builds on project.css.

   The page is its own world, in Solace's green: it opens in a dark chapter (the journey and
   the systems that forget refugees), a dawn gradient brightens it as Solace enters, and the
   rest is told in the light. Scroll-driven moments (close your eyes, the journey, the pillars,
   the scanner pipeline, the app flow) are driven by ../home/solace.js. */

/* ---------- Theme: Solace green replaces the site brand colour on this page ---------- */
.solace {
  --sol-lime: #627866; /* Solace green */
  --sol-lime-soft: #a9bead; /* the same green, lightened for dark backgrounds */
  --sol-sage: #709176;
  --sol-ink: #141a16;
  --sol-ink-2: #1f2621;

  --color-bg-brand: var(--sol-lime);
  --color-bg-brand-hover: #52665a;
  --color-bg-brand-subtle: #e9eeea;
  --color-text-brand: #627866;
  --color-border-brand: #627866;
  --color-icon-brand: #627866;
  --pj-brand-light: var(--sol-lime-soft);
}

.sol-overview {
  margin-top: var(--space-5xl);
}

/* Light text on Solace green. */
.solace .pj-pitch__impact,
.solace .pj-pitch__impact .pj-pitch__tag {
  color: #f9f9f9;
}

/* ---------- The dark chapter ---------- */
.sol-dark {
  --color-bg-primary: var(--sol-ink);
  --color-bg-secondary: var(--sol-ink-2);
  --color-text-primary: #f2f4ef;
  --color-text-secondary: #a7b0a5;
  --color-border-default: rgb(255 255 255 / 0.14);
  --color-text-brand: var(--sol-lime-soft);
  margin-top: var(--space-9xl);
  padding: var(--space-9xl) 0;
  background: var(--sol-ink);
  color: var(--color-text-primary);
}

.sol-dark .pj-sec:first-of-type {
  margin-top: 0;
}

/* A short fade from the dark chapter back into the light as Solace enters. */
.sol-dawn {
  height: 96px;
  background: linear-gradient(var(--sol-ink), var(--color-bg-primary));
}

/* ---------- 01 The journey: a sideways scroll with a record that frays ---------- */
.sol-journey {
  margin-top: 0;
}

.sol-journey__pin {
  position: relative;
  height: 400vh; /* set to the real distance in solace.js */
}

.sol-journey__stage {
  position: sticky;
  top: var(--layout-nav-height);
  height: calc(100vh - var(--layout-nav-height));
  overflow: hidden;
  display: flex;
  align-items: center;
}

.sol-journey__track {
  display: flex;
  gap: var(--space-3xl);
  width: max-content;
  padding-inline: var(--page-margin) 34vw;
  will-change: transform;
}

.sol-stage {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  width: min(60vw, 820px);
  opacity: 0.45;
  transition: opacity 0.5s ease;
}

.sol-stage.is-on {
  opacity: 1;
}

.sol-stage img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10; /* every stage photo the same size, rounded on all corners */
  object-fit: cover;
  border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
  /* Keep the photo and its caption within the pinned stage on shorter screens. */
  .sol-stage {
    width: min(60vw, 820px, (100vh - var(--layout-nav-height) - 260px) * 1.6);
  }
}

.sol-stage__text {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-xs) var(--space-lg);
  max-width: 640px;
}

.sol-stage__num {
  grid-row: span 2;
  margin: 0;
  color: var(--color-text-brand);
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--type-h3-size);
  line-height: 1;
}

.sol-stage h3 {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line-height);
}

.sol-stage p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line-height);
}

/* The case record: stays put while the journey slides past, losing pieces at each handoff. */
.sol-record {
  position: absolute;
  right: var(--page-margin);
  bottom: var(--space-3xl);
  width: min(300px, 30vw);
  padding: var(--space-xl);
  border-radius: var(--radius-md);
  background: #efe9dc;
  color: #262c2d;
  rotate: -2deg;
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.45);
}

.sol-record__title {
  margin: 0 0 var(--space-md);
  font-weight: 500;
  font-size: var(--type-label-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sol-record ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--type-body-md-size);
}

.sol-record li {
  padding-bottom: var(--space-sm);
  border-bottom: 1px dashed rgb(38 44 45 / 0.25);
  transition: opacity 0.6s ease, filter 0.6s ease;
}

.sol-record li.is-lost {
  opacity: 0.25;
  filter: blur(2px);
  text-decoration: line-through;
}

.sol-record__count {
  margin: var(--space-md) 0 0;
  font-size: var(--type-body-md-size);
}

.sol-record__count strong {
  color: #b23b2c;
  font-family: var(--font-family-display);
  font-size: var(--type-h4-size);
}

/* ---------- 02 The problem ---------- */
.sol-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3xl);
  margin: 0;
}

.sol-facts div {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-xl);
  border-top: var(--border-width-thin) solid var(--color-border-default);
}

.sol-facts dt {
  color: var(--color-text-brand);
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: clamp(56px, 6.2vw, 96px);
  line-height: 1;
  letter-spacing: -0.04em;
}

.sol-facts dd {
  margin: 0;
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line-height);
}

.sol-facts p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-label-size);
}

/* ---------- 03 Research insights ---------- */
.sol-method {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--space-2xl);
  margin: 0;
}

.sol-method div {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.sol-method dt {
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--type-h2-size);
  line-height: 1;
}

.sol-method dd {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
}

.sol-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.sol-block__title {
  margin: 0;
  color: var(--color-text-brand);
  font-weight: 500;
  font-size: var(--type-label-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sol-insights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sol-insights li {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-2xl);
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
}

.sol-insights__fig {
  color: var(--color-text-brand);
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: clamp(40px, 4vw, 64px);
  line-height: 1;
  letter-spacing: -0.03em;
}

.sol-insights__num {
  color: var(--color-text-brand);
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--type-body-md-size);
}

.sol-insights h4 {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-line-height);
}

.sol-insights p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
}

/* Plain insights: numbered rows rather than cards. */
.sol-insights--plain li {
  padding: var(--space-xl) 0 0;
  border-radius: 0;
  border-top: var(--border-width-thin) solid var(--color-border-default);
  background: none;
}

.sol-insights--tight {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}

.sol-visit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3xl);
  align-items: start;
}

.sol-visit__photo {
  margin: 0;
}

.sol-visit__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.sol-quote {
  margin: 0;
  padding: var(--space-3xl) 0;
}

.sol-quote blockquote {
  max-width: 28ch;
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.sol-quote figcaption {
  margin-top: var(--space-lg);
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
}

/* Reframes, over the blurred landscape. */
.sol-reframe {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.sol-reframe > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
}

.sol-reframe__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  padding: var(--space-6xl) var(--space-5xl);
}

.sol-reframe ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sol-reframe li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm) var(--space-xl);
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line-height);
}

.sol-reframe s {
  color: var(--color-text-secondary);
  text-decoration-thickness: 2px;
}

.sol-reframe li span::before {
  content: "→ ";
  color: var(--color-text-brand);
}

.sol-hmw {
  margin: var(--space-xl) 0 0;
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-line-height);
}

.sol-hmw span {
  color: var(--color-text-brand);
  font-weight: 600;
}

/* ---------- 04 The system: Capture · Preserve · Connect, then the principles ---------- */
.sol-pillars {
  position: relative;
  height: 320vh;
}

.sol-pillars__stage {
  position: sticky;
  top: calc(var(--layout-nav-height) + var(--space-3xl));
  height: calc(100vh - var(--layout-nav-height) - var(--space-6xl));
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--sol-ink);
  color: #f2f4ef;
}

.sol-pillars__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
}

.sol-pillars__list {
  position: relative;
  display: grid;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sol-pillars__list li {
  grid-area: 1 / 1;
  align-self: center;
  max-width: 760px;
  padding: 0 var(--space-6xl);
  opacity: 0;
  translate: 0 32px;
  transition: opacity 0.7s ease, translate 0.7s var(--ease-morph);
}

.sol-pillars__list li.is-on {
  opacity: 1;
  translate: 0 0;
}

.sol-pillars__list .sol-pillars__word {
  margin: 0 0 var(--space-lg);
  color: var(--sol-lime-soft);
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: clamp(64px, 9vw, 140px);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.sol-pillars__list p {
  margin: 0;
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-line-height);
}

.sol-pillars__list .sol-pillars__by {
  margin-top: var(--space-xl);
  color: #c8d3c3;
  font-size: var(--type-label-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sol-pillars__dots {
  position: absolute;
  right: var(--space-3xl);
  top: 50%;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
  translate: 0 -50%;
}

.sol-pillars__dots li {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.35);
  transition: background-color 0.3s ease, scale 0.3s ease;
}

.sol-pillars__dots li.is-on {
  background: var(--sol-lime-soft);
  scale: 1.3;
}

.sol-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2xl);
}

.sol-principles > .pj-label {
  grid-column: 1 / -1;
  color: var(--color-text-brand);
}

.sol-principle {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.sol-principle img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3; /* one shape for all three, so the words line up */
  object-fit: cover;
  object-position: center 70%;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-lg);
}

.sol-principle h3 {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line-height);
  letter-spacing: -0.01em;
}

.sol-principle p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
}

/* ---------- 05 S-Scanner ---------- */
.sol-scanner-hero {
  margin: 0;
}

.sol-scanner-hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
}

.sol-scanner-hero figcaption,
.sol-pipeline__ai {
  margin-top: var(--space-sm);
  color: var(--color-text-secondary);
  font-size: var(--type-label-size);
}

/* Anatomy: tap a hotspot on the render to read about that part. */
.sol-anatomy {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-3xl);
  align-items: center;
}

.sol-anatomy__img {
  position: relative;
  padding: var(--space-2xl);
  border-radius: var(--radius-xl);
  background: #dfe7dd;
}

.sol-anatomy__img img {
  display: block;
  width: 100%;
  height: auto;
}

.sol-hot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 28px;
  height: 28px;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--sol-lime);
  translate: -50% -50%;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgb(98 120 102 / 0.6);
  animation: sol-pulse 2.2s ease-out infinite;
}

.sol-hot.is-active {
  background: var(--sol-ink);
  animation: none;
  box-shadow: 0 0 0 6px rgb(98 120 102 / 0.5);
}

@keyframes sol-pulse {
  to { box-shadow: 0 0 0 16px rgb(98 120 102 / 0); }
}

.sol-parts {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: var(--space-md) 0 var(--space-xl);
  padding: 0;
  list-style: none;
}

.sol-parts li {
  padding: var(--space-md) 0;
  border-bottom: var(--border-width-thin) solid var(--color-border-default);
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

.sol-parts li.is-active {
  opacity: 1;
}

.sol-parts h4,
.sol-pipeline__steps h4,
.sol-flow__steps h4,
.sol-change h4 {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-line-height);
}

.sol-parts p,
.sol-pipeline__steps p,
.sol-flow__steps p,
.sol-change p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
}

.sol-anatomy__spec {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-label-size);
  line-height: 1.6;
}

/* How it works: the image stays while the five steps light up in turn. */
.sol-pipeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

.sol-pipeline__pin {
  position: relative;
  height: 300vh;
}

.sol-pipeline__stage {
  position: sticky;
  top: calc(var(--layout-nav-height) + var(--space-5xl));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5xl);
  align-items: center;
  min-height: calc(100vh - var(--layout-nav-height) - var(--space-8xl));
}

.sol-pipeline__imgs {
  display: grid;
}

.sol-pipeline__imgs img {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  opacity: 0;
  transition: opacity 0.6s ease;
}

.sol-pipeline__imgs img.is-on {
  opacity: 1;
}

.sol-pipeline__steps,
.sol-flow__steps {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sol-pipeline__steps li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  padding: var(--space-lg) 0;
  border-bottom: var(--border-width-thin) solid var(--color-border-default);
  opacity: 0.35;
  transition: opacity 0.4s ease;
}

.sol-pipeline__steps li > * {
  grid-column: 2;
}

.sol-pipeline__steps li span {
  grid-column: 1;
  grid-row: span 2;
  color: var(--color-text-brand);
  font-family: var(--font-family-display);
  font-weight: 600;
}

.sol-pipeline__steps li.is-on {
  opacity: 1;
}

/* Confidence: drag the score, see where the field goes. */
.sol-confidence {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5xl);
  align-items: center;
  padding: var(--space-5xl);
  border-radius: var(--radius-xl);
  background: var(--color-bg-brand-subtle);
}

.sol-confidence > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.sol-confidence__label {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-xl);
  font-weight: 500;
}

.sol-confidence__label output {
  color: var(--color-text-brand);
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--type-h3-size);
}

.sol-confidence__range {
  width: 100%;
  accent-color: var(--color-border-brand);
}

.sol-tiers {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sol-tiers li {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--space-2xs) var(--space-lg);
  padding: var(--space-lg) var(--space-xl);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-bg-primary);
  opacity: 0.45;
  transition: opacity 0.3s ease, border-color 0.3s ease;
}

.sol-tiers li.is-on {
  border-color: var(--color-border-brand);
  opacity: 1;
}

.sol-tiers strong {
  grid-row: span 2;
  white-space: nowrap;
  font-family: var(--font-family-display);
  font-size: var(--type-h4-size);
}

.sol-tiers span {
  font-weight: 600;
}

.sol-tiers p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
}

.sol-impact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.sol-impact dl,
.sol-results {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--space-2xl);
  margin: 0;
}

.sol-impact dl div,
.sol-results div {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-lg);
  border-top: 2px solid var(--color-border-brand);
}

.sol-impact dt,
.sol-results dt {
  color: var(--color-text-brand);
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: clamp(36px, 3.6vw, 56px);
  line-height: 1;
  letter-spacing: -0.03em;
}

.sol-impact dd,
.sol-results dd {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
}

/* ---------- 06 Solace App ---------- */
.sol-today ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}

.sol-today li {
  padding: var(--space-2xl);
  border-radius: var(--radius-lg);
  background: var(--sol-ink);
  color: #c8d3c3;
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line-height);
}

.sol-today strong {
  display: block;
  margin-bottom: var(--space-xs);
  color: #f2f4ef;
  font-family: var(--font-family-display);
  font-size: var(--type-h4-size);
}

.sol-change__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.sol-change figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin: 0;
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
}

.sol-change img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: contain;
}

/* The scanner flow: the phone stays put while Sarah's steps scroll beside it. */
.sol-flow {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

.sol-flow__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6xl);
}

.sol-flow__phone {
  position: sticky;
  top: calc(var(--layout-nav-height) + var(--space-5xl));
  align-self: start;
  display: grid;
  place-items: center;
  height: calc(100vh - var(--layout-nav-height) - var(--space-8xl));
  border-radius: var(--radius-xl);
  background: var(--color-bg-brand-subtle);
}

.sol-flow__screens {
  display: grid;
  place-items: center;
}

.sol-flow__screens img,
.sol-flow__screens video {
  grid-area: 1 / 1;
  height: calc((100vh - var(--layout-nav-height) - var(--space-8xl)) * 0.86); /* 86% of the panel */
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.sol-flow__screens video {
  /* The recordings sit on white; trim to the phone's own rounded outline. */
  clip-path: inset(0.6% 1.9% 0.5% 1.7% round 16% / 7.8%);
}

.sol-flow__screens .is-on {
  opacity: 1;
}

.sol-flow__steps li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-content: center;
  min-height: 60vh;
  opacity: 0.3;
  transition: opacity 0.4s ease;
}

.sol-flow__steps li > * {
  grid-column: 2;
}

.sol-flow__steps li span {
  grid-column: 1;
  grid-row: span 2;
  color: var(--color-text-brand);
  font-family: var(--font-family-display);
  font-weight: 600;
}

.sol-flow__steps li.is-on {
  opacity: 1;
}

/* ---------- 07 Testing ---------- */
/* Before/after carousel (shared with Setu and CNN). The screens are phone renders on
   transparent backgrounds, so they sit whole on a soft panel instead of being cropped. */
.sol-iter .pj-slide__half img {
  height: clamp(380px, 40vw, 580px);
  padding: var(--space-2xl) var(--space-xl) 0;
  object-fit: contain;
  object-position: center bottom;
  background: var(--color-bg-brand-subtle);
}

/* ---------- Closing ---------- */
.sol-close {
  position: relative;
  display: grid;
  place-items: center;
  margin-top: var(--space-9xl);
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.sol-close img {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
}

/* A soft shade so the closing line reads against the bright sky. */
.sol-close::after {
  content: "";
  grid-area: 1 / 1;
  align-self: stretch;
  justify-self: stretch;
  background: radial-gradient(ellipse at center, rgb(20 26 22 / 0.55), rgb(20 26 22 / 0.15) 70%);
  border-radius: var(--radius-xl);
}

.sol-close__line {
  grid-area: 1 / 1;
  z-index: 1;
  max-width: 16ch;
  margin: 0;
  padding: var(--space-3xl);
  color: #f9f9f9;
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: clamp(36px, 5vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-align: center;
  text-shadow: 0 2px 30px rgb(0 0 0 / 0.5);
}

.sol-close__line em {
  color: var(--sol-lime-soft);
}

/* ---------- Smaller screens ---------- */
@media (max-width: 1099px) {
  .sol-today ol,
  .sol-change__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .sol-facts,
  .sol-insights,
  .sol-visit,
  .sol-principles,
  .sol-anatomy,
  .sol-confidence,
  .sol-flow__grid,
  .sol-pipeline__stage {
    grid-template-columns: minmax(0, 1fr);
  }

  .sol-method,
  .sol-results {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sol-impact dl {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
  }

  .sol-today ol,
  .sol-change__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Phones: the journey becomes a sideways swipe; the record sits under it. */
  .sol-journey__pin {
    height: auto !important;
  }

  .sol-journey__stage {
    position: static;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2xl);
    overflow: visible;
  }

  .sol-journey__track {
    width: auto;
    padding-inline: var(--page-margin);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    transform: none !important;
  }

  .sol-stage {
    width: 82vw;
    opacity: 1;
    scroll-snap-align: center;
  }

  .sol-record {
    position: static;
    width: auto;
    margin-inline: var(--page-margin);
    rotate: 0deg;
  }

  /* Phones: pinned sequences become plain stacks. */
  .sol-pillars,
  .sol-pipeline__pin {
    height: auto;
  }

  .sol-pillars__stage {
    position: static;
    height: auto;
  }

  .sol-pillars__list {
    gap: var(--space-5xl);
    padding: var(--space-5xl) 0;
  }

  .sol-pillars__list li {
    grid-area: auto;
    padding: 0 var(--space-2xl);
    opacity: 1;
    translate: none;
  }

  .sol-pillars__dots {
    display: none;
  }

  .sol-pipeline__stage {
    position: static;
    min-height: 0;
  }

  .sol-pipeline__imgs img:not(:first-child) {
    display: none;
  }

  .sol-pipeline__imgs img,
  .sol-pipeline__steps li,
  .sol-flow__steps li {
    opacity: 1;
  }

  .sol-flow__phone {
    position: static;
    height: 70vh;
  }

  .sol-flow__steps li {
    min-height: 0;
    padding: var(--space-lg) 0;
  }

  .sol-confidence,
  .sol-reframe__inner {
    padding: var(--space-2xl);
  }

  .sol-hot {
    width: 16px;
    height: 16px;
    border-width: 2px;
  }

  .sol-anatomy__img {
    padding: var(--space-md);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sol-pillars__list li,
  .sol-stage,
  .sol-record li,
  .sol-pipeline__imgs img,
  .sol-flow__screens img,
  .sol-flow__screens video {
    transition: none;
  }

  .sol-hot {
    animation: none;
  }
}

/* ---------- Research, consolidated: one set of insights, each tagged with where it came from ---------- */
.sol-research {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-4xl);
  align-items: center;
}

.sol-research .sol-method {
  grid-auto-flow: row;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
}

.sol-research .sol-method div {
  flex-direction: row;
  align-items: baseline;
  gap: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: var(--border-width-thin) solid var(--color-border-default);
}

.sol-research .sol-method dt {
  flex: none;
  min-width: 2.6em;
}

.sol-research .sol-method dd {
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line-height);
}

.sol-research__photo {
  margin: 0;
}

.sol-research__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.sol-insights--merged {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sol-insights--merged p {
  flex: 1;
}

.sol-insights--merged strong {
  color: var(--color-text-brand);
  font-weight: 600;
}

.sol-src {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: var(--space-sm) 0 0;
  padding: 0;
  list-style: none;
}

.sol-src li {
  padding: 2px var(--space-md);
  border: var(--border-width-thin) solid var(--color-border-default);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  font-size: var(--type-label-size);
  letter-spacing: 0.04em;
}

.sol-quotes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4xl);
}

.sol-quotes .sol-quote {
  padding: var(--space-2xl) 0 0;
  border-top: var(--border-width-thin) solid var(--color-border-default);
}

.sol-quotes .sol-quote blockquote {
  max-width: none;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.25;
}

@media (max-width: 1099px) {
  .sol-research,
  .sol-quotes {
    grid-template-columns: minmax(0, 1fr);
  }

  .sol-insights--merged {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .sol-insights--merged {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Phones: the three scroll stories, rebuilt for a narrow screen ---------- */
@media (max-width: 767px) {
  /* The journey reads top to bottom, like the rest of the page. */
  .sol-journey__track {
    flex-direction: column;
    gap: var(--space-4xl);
    width: auto;
    overflow: visible;
    scroll-snap-type: none;
  }

  .sol-stage {
    width: auto;
  }

  /* How it works and the scanner flow: the picture stays under the menu while the steps
     scroll past beneath it, and it changes with the step you're reading. */
  .sol-pipeline__imgs,
  .sol-flow__phone {
    position: sticky;
    top: calc(var(--layout-nav-height) + 52px); /* below the menu and the section bar */
    z-index: 2;
    background: var(--color-bg-primary);
    /* Cover the strip above (behind the section bar) and the sides, so steps don't show through. */
    box-shadow: 0 -64px 0 0 var(--color-bg-primary), 0 0 0 var(--space-md) var(--color-bg-primary);
  }

  .sol-pipeline__imgs {
    padding-block: var(--space-md);
  }

  .sol-pipeline__imgs img:not(:first-child) {
    display: block;
  }

  .sol-pipeline__imgs img,
  .sol-pipeline__steps li,
  .sol-flow__steps li {
    opacity: 0.3;
  }

  .sol-pipeline__imgs img.is-on,
  .sol-pipeline__steps li.is-on,
  .sol-flow__steps li.is-on {
    opacity: 1;
  }

  .sol-pipeline__imgs img:not(.is-on) {
    opacity: 0;
  }

  .sol-pipeline__steps li,
  .sol-flow__steps li {
    min-height: 30vh;
    align-content: start;
  }

  .sol-pipeline__steps li:last-child,
  .sol-flow__steps li:last-child {
    min-height: 0;
    padding-bottom: 20vh;
  }

  .sol-flow__phone {
    height: 40vh;
    background: var(--color-bg-brand-subtle);
  }

  .sol-flow__screens img,
  .sol-flow__screens video {
    height: calc(40vh * 0.88);
  }
}