/* Case study page layout. All measurements reference tokens.css. */

/* ── Section shell ──────────────────────────────────────────────────── */
.case-study {
  display: block;
}

.section {
  width: 100%;
  background-color: var(--color-bg);
  padding-block: clamp(96px, 12vw, 180px);
}

.section__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--content-gutter);
}

/* ── Section header (eyebrow + title + lede) ────────────────────────── */
.section-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 831px;
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-regular);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}
.eyebrow--blue {
  color: var(--color-accent-blue);
}
.eyebrow--red {
  color: var(--color-accent-red);
}
.eyebrow--subtle {
  color: var(--color-text-subtle);
  font-size: 13px;
}
.eyebrow--green {
  color: var(--color-accent-green);
}

.section-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--color-text);
  max-width: 831px;
}

.subsection-header {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.subsection-title {
  font-size: 28px;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--color-text);
}

.section-lede {
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  max-width: 707px;
}

.bullet-list {
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-weight: var(--fw-light);
  color: var(--color-text-muted);
  max-width: 831px;
}
.bullet-list li {
  position: relative;
  padding-left: var(--space-6);
  line-height: var(--lh-body);
}
.bullet-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 12px;
  height: 1px;
  background-color: var(--color-text-subtle);
}

.text-accent-blue {
  color: var(--color-accent-blue);
}

.sub-block {
  padding-left: 20px;
}

/* ─────────────────────────────────────────────────────────────────────
   1. Hero
   Full-viewport hero. Text and gallery share the vertical center.
   ──────────────────────────────────────────────────────────────────── */
.section--hero {
  padding-block: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
}
.hero__inner {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-16);
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  max-width: 676px;
}

.hero__client-logo img {
  height: 20px;
  width: auto;
  opacity: 0.95;
}

.hero__title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  font-size: var(--fs-tag);
  font-weight: var(--fw-regular);
}
.hero__tag {
  color: var(--color-text);
  opacity: 0.5;
}
.hero__tag--shipped {
  color: var(--color-accent-green);
  opacity: 1;
}

/* Hero gallery — vertically drifting phone screen columns.
   Centered against the text via the parent grid's align-items: center. */
.hero__gallery {
  position: relative;
  display: flex;
  gap: var(--space-4);
  align-items: center;
  height: clamp(560px, 70vh, 760px);
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 12%,
    black 88%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 12%,
    black 88%,
    transparent 100%
  );
}
.hero__gallery-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex-shrink: 0;
  width: 217px;
  animation: drift 28s linear infinite;
}
.hero__gallery-col--inner {
  transform: translateY(-12%);
}
.hero__gallery-col--outer {
  animation-direction: reverse;
  animation-duration: 36s;
  transform: translateY(8%);
}
.hero__gallery-col img {
  width: 100%;
  height: 456px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  background-color: var(--color-surface-1);
}

@keyframes drift {
  0% {
    transform: translateY(-12%);
  }
  50% {
    transform: translateY(-22%);
  }
  100% {
    transform: translateY(-12%);
  }
}

/* ─────────────────────────────────────────────────────────────────────
   2. Team & Role
   ──────────────────────────────────────────────────────────────────── */
.team__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.team__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.team__roster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, max-content));
  gap: var(--space-10);
  margin: 0;
}
.team__role {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.team__role dt {
  font-size: var(--fs-label);
  font-weight: var(--fw-light);
  color: var(--color-text-subtle);
  letter-spacing: 0.02em;
}
.team__role dd {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  color: var(--color-text);
  line-height: var(--lh-body);
}

/* ─────────────────────────────────────────────────────────────────────
   3. Challenge — quote grid
   ──────────────────────────────────────────────────────────────────── */
.challenge__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}
.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--space-8), 4vw, 80px);
}
.quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 297px;
  color: var(--color-text-muted);
}
.quote__text {
  margin: 0;
  font-size: var(--fs-quote);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
}
.quote__attribution {
  font-style: normal;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-light);
  margin-top: var(--space-6);
}

/* ─────────────────────────────────────────────────────────────────────
   4. Research & Discovery
   ──────────────────────────────────────────────────────────────────── */
.research__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.research__insights,
.research__constraints,
.research__artefacts {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.insight-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  counter-reset: insight;
}
.insight {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  min-height: 182px;
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
}
.insight__num {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--color-accent-blue);
  letter-spacing: 0.04em;
}
.insight__text {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

.constraint-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
.constraint {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
}
.constraint__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--color-text);
}
.constraint__body {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

.artefact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
}
.artefact {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.artefact__media {
  aspect-ratio: 412 / 280;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-surface-1);
}
.artefact__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.artefact__caption {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--color-text);
}

/* ─────────────────────────────────────────────────────────────────────
   5. Users — pattern cards
   ──────────────────────────────────────────────────────────────────── */
.users__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.user-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
.user-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 204px;
  padding: var(--space-4);
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
}
.user-card__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color: var(--color-text);
}
.user-card__sub {
  margin-top: var(--space-2);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-light);
  color: var(--color-text-muted);
  line-height: var(--lh-body);
}
.user-card__influence {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-light);
  color: var(--color-accent-blue);
  line-height: var(--lh-body);
}

/* ─────────────────────────────────────────────────────────────────────
   6. Strategy — design principles
   ──────────────────────────────────────────────────────────────────── */
.strategy__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.strategy__bets,
.principles {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.principle-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-5);
}
.principle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-10);
  min-height: 204px;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.principle__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--color-text);
}
.principle__body {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}
.principles__footnote {
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  color: var(--color-text-subtle);
}

.bet-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-5);
}
.bet {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
}
.bet__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--color-text);
}
.bet__body {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

/* ─────────────────────────────────────────────────────────────────────
   7. Key Product Decisions — tabs + decision cards
   ──────────────────────────────────────────────────────────────────── */
.decisions__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.decisions__tabs {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.tab-nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tab-nav__item {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: var(--space-3) var(--space-6) var(--space-4);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.tab-nav__item[aria-selected="true"] {
  color: var(--color-text);
  font-weight: var(--fw-semibold);
  border-bottom-color: var(--color-accent-blue);
}

.tab-panel[hidden] {
  display: none;
}

.decision-grid {
  display: flex;
  flex-direction: column;
  gap: 120px;
}

.decision {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.decision__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.decision__title {
  font-size: 28px;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--color-text);
}

.decision__body {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

.decision__intent {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background-color: rgba(125, 255, 185, 0.04);
  border: 1px solid rgba(125, 255, 185, 0.15);
  border-radius: var(--radius-md);
}

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

.decision__metrics li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}
.decision__metrics li::before {
  content: "▲";
  color: var(--color-accent-green);
  font-size: 10px;
  flex-shrink: 0;
}
.decision__metrics li[data-trend="down"]::before {
  content: "▼";
}

/* Wrapper used for decisions with an area-of-interest indicator. */
.decision__media {
  position: relative;
}

.decision__image {
  background-color: var(--color-surface-1);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

/* Padding gives the image breathing room inside its card */
.decision__image:not(.decision__image--split) {
  padding-block: var(--space-10);
}

/* Single image: constrained to the same height a split pair produces.
   object-fit: contain keeps the full image visible (no cropping).
   object-position: top keeps important UI anchored to the top. */
.decision__image:not(.decision__image--split) img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 580px;
  object-fit: contain;
  object-position: top center;
}

/* Split: transparent wrapper — no border, no background, no overflow clip.
   Each img is its own rounded screen. */
.decision__image--split {
  background: transparent;
  border: none;
  overflow: visible;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.decision__image--split img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background-color: var(--color-surface-1);
}

/* Red indicator — sits in the grid gap, beside the image */
.decision__indicator {
  position: absolute;
  left: -10px;
  width: 3px;
  height: 56px;
  background: var(--color-accent-red);
  border-radius: 2px;
  transform: translateY(-50%);
}

/* ─────────────────────────────────────────────────────────────────────
   8. Design System
   ──────────────────────────────────────────────────────────────────── */
.design-system__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* Design system sub-grids — three layouts, each tuned to its content.
   Common base: drop the default 412:280 frame and contain so images
   show fully at their natural proportions. */
.ds-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}

.ds-grid .artefact__media {
  aspect-ratio: auto;
  background: transparent;
  overflow: hidden;
}

.ds-grid .artefact__media img,
.ds-grid .artefact__media picture {
  display: block;
  width: 100%;
  height: auto;
  object-fit: unset;
}

/* Colours — simple 2-col, each cell takes its natural height. */
.ds-grid--cols-2 {
  align-items: start;
}

/* Buttons — first artefact (left) spans both rows of the right column.
   Right column stacks Buttons 2 over Buttons 3 at their natural heights;
   Buttons 1's image scales (object-fit: contain) to fill the spanned
   height without ever cropping. */
.ds-grid--buttons {
  align-items: stretch;
}

.ds-grid--buttons > .artefact:first-child {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ds-grid--buttons > .artefact:first-child .artefact__media {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ds-grid--buttons > .artefact:first-child .artefact__media img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Organisms — Date Picker (1st) alone dictates the row height. The
   Component List image is absolutely positioned, so it contributes zero
   intrinsic height to the grid row calculation. The row sizes itself
   purely to Date Picker's natural height; Component List's cell
   stretches to match, and the image scales-down via object-fit: contain
   (becoming narrower as it preserves aspect ratio). */
.ds-grid--organisms {
  align-items: stretch;
}

.ds-grid--organisms > .artefact {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Date Picker — natural sizing, governs the row */
.ds-grid--organisms > .artefact:first-child .artefact__media picture,
.ds-grid--organisms > .artefact:first-child .artefact__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Component List — image lifted out of layout flow so it doesn't push
   the row taller than Date Picker. The cell stretches to row height
   via the grid's align-items: stretch. */
.ds-grid--organisms > .artefact:last-child .artefact__media {
  position: relative;
  flex: 1;
  min-height: 0;
}

.ds-grid--organisms > .artefact:last-child .artefact__media picture {
  position: absolute;
  inset: 0;
  display: block;
  width: auto;
  height: auto;
}

.ds-grid--organisms > .artefact:last-child .artefact__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
}

.design-system__stat {
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  padding-left: var(--space-6);
  border-left: 2px solid var(--color-accent-blue);
  max-width: 707px;
}

/* ─────────────────────────────────────────────────────────────────────
   9. Testing & Validation
   ──────────────────────────────────────────────────────────────────── */
.testing__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.testing__study-setup,
.testing__key-insights,
.testing__validation,
.testing__artefacts {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.testing__paras {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 707px;
}

.testing__paras p {
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

.labeled-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 707px;
}

.labeled-list__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-left: var(--space-5);
}

.labeled-list__item::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

.labeled-list__title {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body);
  color: var(--color-text);
}

.labeled-list__body {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

/* ─────────────────────────────────────────────────────────────────────
   10. Impact
   ──────────────────────────────────────────────────────────────────── */
.impact__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.impact__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.impact-metric {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-10);
  padding: var(--space-6);
  min-height: 220px;
  background-color: rgba(125, 255, 185, 0.03);
  border: 1px solid rgba(125, 255, 185, 0.25);
  border-radius: var(--radius-md);
}

.impact-metric__value {
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--color-accent-green);
}

.impact-metric__body {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

.impact__insights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}

.impact-insight {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6);
  background-color: rgba(125, 255, 185, 0.03);
  border: 1px solid rgba(125, 255, 185, 0.25);
  border-radius: var(--radius-md);
}

.impact-insight__title {
  font-size: var(--fs-tag);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--color-accent-green);
}

.impact-insight__body {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

/* ─────────────────────────────────────────────────────────────────────
   11. Social Proof
   ──────────────────────────────────────────────────────────────────── */
.social-proof__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.social-proof__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}

.social-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.social-card__media {
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-surface-1);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.social-card__media img {
  width: 100%;
  height: auto;
  display: block;
}

.social-card__caption {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

.social-card__sub {
  font-size: var(--fs-body-sm);
  font-style: italic;
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--color-text-subtle);
  margin-top: calc(-1 * var(--space-2));
}

/* ─────────────────────────────────────────────────────────────────────
   12. Final Designs
   ──────────────────────────────────────────────────────────────────── */
.final-designs__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* Break out of the content gutter; contents scroll horizontally */
.screen-strip-wrapper {
  margin-inline: calc(-1 * var(--content-gutter));
  overflow-x: auto;
  scrollbar-width: none;
}
.screen-strip-wrapper::-webkit-scrollbar {
  display: none;
}

.screen-strip {
  display: flex;
  gap: var(--space-5);
  padding-inline: var(--content-gutter);
}

.screen-strip__item {
  flex-shrink: 0;
  width: 210px;
  aspect-ratio: 360 / 760;
  background-color: var(--color-surface-1);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.screen-strip__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Prototype stage — one per prototype, stacked vertically */
.prototype-stage {
  background-color: var(--color-surface-1);
  border-radius: var(--radius-xl);
  padding: var(--space-16) var(--space-20) var(--space-10);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

/* Galaxy S10 CSS frame
   Punch-hole camera (::before) — no notch, no home bar */
.phone-frame {
  position: relative;
  border-radius: 36px;
  border: 8px solid #1c1c1e;
  background: #000;
  padding: 20px 8px 16px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(0, 0, 0, 0.6),
    0 40px 100px rgba(0, 0, 0, 0.8);
}


.phone-frame iframe {
  display: block;
  width: 360px;
  height: 760px;
  border: 0;
  border-radius: 4px;
}

/* ─────────────────────────────────────────────────────────────────────
   Reveal on scroll (progressive enhancement — only kicks in when JS
   adds .js-reveal to <html>; without JS, sections render normally).
   ──────────────────────────────────────────────────────────────────── */
.js-reveal .section:not(.section--hero) {
  opacity: 0;
  transform: translateY(56px);
  filter: blur(4px);
  transition:
    opacity 1.1s var(--ease-out),
    transform 1.1s var(--ease-out),
    filter 1.1s var(--ease-out);
}
.js-reveal .section.is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* ── Decision scroll animation ──────────────────────────────────────────
   Each decision fades in as it enters the reading area and fades out
   as it exits — only one feels "active" at a time.
   ──────────────────────────────────────────────────────────────────── */
.js-reveal .decision {
  opacity: 0;
  transform: translateY(48px);
  filter: blur(6px);
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out),
    filter 0.9s var(--ease-out);
}

.js-reveal .decision.is-decision-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Scrolled past — drift upward and blur back out */
.js-reveal .decision.is-decision-past {
  opacity: 0;
  transform: translateY(-24px);
  filter: blur(6px);
  transition:
    opacity 0.6s ease-in,
    transform 0.6s ease-in,
    filter 0.6s ease-in;
}

/* Progressive enhancement: CSS Scroll-driven animations (Chrome 115+).
   The animation is fully scroll-linked — tied precisely to scroll
   velocity for a truly buttery feel. */
@supports (animation-timeline: view()) {
  .js-reveal .decision {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
    animation: decision-view linear both;
    animation-timeline: view();
    /* cover 15%→85%: element needs to be well inside the viewport.
       cover 50% = element centre aligned with viewport centre. */
    animation-range: cover 15% cover 85%;
  }

  @keyframes decision-view {
    /* Fade in as the element approaches viewport centre */
    0%   { opacity: 0; transform: translateY(48px);  filter: blur(8px); }
    40%  { opacity: 1; transform: none;              filter: blur(0);   }
    /* Hold fully visible around centre */
    60%  { opacity: 1; transform: none;              filter: blur(0);   }
    /* Fade out as it scrolls above centre */
    100% { opacity: 0; transform: translateY(-24px); filter: blur(8px); }
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Responsive
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .insight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .principle-grid,
  .bet-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hero__gallery-col img {
    height: 360px;
  }
}

@media (max-width: 960px) {
  .section--hero {
    min-height: 0;
    padding-block: var(--space-20);
  }
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-12);
  }
  .hero__gallery {
    height: 420px;
  }
  .quote-grid,
  .user-grid,
  .constraint-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .decision {
    grid-template-columns: minmax(0, 1fr);
  }
  .principle-grid,
  .bet-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .artefact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .insight-grid,
  .principle-grid,
  .bet-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .team__roster {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }
}