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

/* ─────────────────────────────────────────────────────────────────────
   Site Nav — sticky bar
   ──────────────────────────────────────────────────────────────────── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--color-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.site-nav__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-5) var(--content-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
}
.site-nav__logo {
  color: rgba(255, 255, 255, 0.85);
  transition: color var(--duration-fast) var(--ease-out);
}
.site-nav__logo:hover { color: #8ad8ff; }
.site-nav__logo svg {
  height: 32px;
  width: auto;
  display: block;
}
.site-nav__links {
  display: flex;
  gap: clamp(20px, 2.5vw, 40px);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
}
.site-nav__links a {
  color: var(--color-text-muted);
  transition: color var(--duration-fast) var(--ease-out);
}
.site-nav__links a:hover,
.site-nav__links a:focus-visible {
  color: var(--color-text);
}

/* ─────────────────────────────────────────────────────────────────────
   Site Footer
   ──────────────────────────────────────────────────────────────────── */
.site-footer {
  position: relative;
  background-color: #0b0e13;
  color: var(--color-text);
  height: clamp(320px, 28vw, 400px);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.site-footer__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}
.site-footer__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  /* Match the homepage's responsive gutter instead of the wider case-study gutter */
  padding-inline: clamp(24px, 6vw, 120px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: clamp(240px, 21vw, 280px);
}
.site-footer__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.site-footer__headline {
  font-family: "Urbanist", sans-serif;
  font-weight: var(--fw-regular);
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.05;
  color: var(--color-text);
}
.site-footer__email {
  font-size: clamp(13px, 1vw, 15px);
  font-weight: var(--fw-light);
  line-height: 1.2;
  color: var(--color-text-muted);
  align-self: flex-start;
  transition: color var(--duration-fast) var(--ease-out);
}
.site-footer__email:hover { color: #8ad8ff; }
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
}
.site-footer__social {
  display: flex;
  gap: var(--space-5);
}
.site-footer__social a {
  display: flex;
  color: rgba(255, 255, 255, 0.55);
  transition: color var(--duration-fast) var(--ease-out);
}
.site-footer__social a:hover { color: #8ad8ff; }
.site-footer__social svg {
  width: 20px;
  height: 20px;
  display: block;
}
.site-footer__logo {
  display: block;
  color: rgba(255, 255, 255, 0.85);
  transition: color var(--duration-fast) var(--ease-out);
}
.site-footer__logo:hover { color: #8ad8ff; }
.site-footer__logo svg {
  height: 34px;
  width: auto;
  display: block;
}

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

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

/* ── Light section — white bg with dark text ────────────────────────── */
/*
   Alternating layout mirrors the homepage rhythm.
   Light sections: team, research, strategy, design-system, impact, final-designs.
   All child tokens are flipped via local custom-property overrides so no
   component rule needs to know whether its section is light or dark.
*/
.section--light {
  background-color: var(--color-bg-light);

  /* Flip token values locally — all descendants inherit these */
  --color-text:        var(--color-text-on-light);
  --color-text-muted:  var(--color-text-on-light-muted);
  --color-text-subtle: var(--color-text-on-light-subtle);

  /* Also flip bg so sticky headers / shadows that read --color-bg
     reflect white inside a light section. */
  --color-bg: var(--color-bg-light);
}

/* Cards: glass-on-dark → subtle-on-white */
.section--light .insight,
.section--light .constraint,
.section--light .user-card,
.section--light .principle,
.section--light .bet {
  background-color: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.09);
}

/* Impact cards keep a subtle green tint */
.section--light .impact-metric,
.section--light .impact-insight {
  background-color: rgba(0, 110, 55, 0.04);
  border-color: rgba(0, 110, 55, 0.18);
}

/* Artefact / screen media placeholders — soft shadow on white */
.section--light .artefact__media {
  background-color: rgba(0, 0, 0, 0.03);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.09),
    0 1px 3px  rgba(0, 0, 0, 0.04);
}
/* Organisms (Date Picker, Component List) are large editorial images —
   no shadow needed, they have their own visual weight. */
.ds-grid--organisms .artefact__media {
  box-shadow: none;
  background-color: transparent;
}
.section--light .screen-strip__item {
  background-color: rgba(0, 0, 0, 0.03);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.09),
    0 1px 3px  rgba(0, 0, 0, 0.04);
}

/* Section divider between adjacent light + dark (top border) */
.section--light + .section:not(.section--light),
.section:not(.section--light) + .section--light {
  border-top: none;  /* rely on bg-colour contrast alone */
}

/* Accent colour adjustments for white backgrounds.
   The neon green (#7dffb9) and light blue (#708dff) don't have enough
   contrast on white — swap to darker accessible equivalents. */
.section--light .eyebrow--green,
.section--light .impact-insight__title {
  color: #007a45;  /* dark accessible green */
}
.section--light .impact-metric__value {
  color: #007a45;
}
.section--light .impact-metric,
.section--light .impact-insight {
  border-color: rgba(0, 122, 69, 0.2);
}
/* decision__metrics triangles (only in dark sections, but guard anyway) */
.section--light .decision__metrics li::before {
  color: #007a45;
}

/* More intense eyebrow colours on white backgrounds */
.section--light .eyebrow--blue {
  color: #385EF1;
}
.section--light .eyebrow--red {
  color: #FF3030;
}

.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-medium);
  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;
}

.hero__title {
  /* Gallient: the opening statement deserves a display treatment.
     Gallient is single-weight (400) — semibold isn't available. */
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: clamp(32px, 4.5vw, 68px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.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;
  /* Anchor from the top so any blank strip at the bottom of the image
     file overflows downward and is clipped by the gallery overflow:hidden. */
  object-position: center top;
}

@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-body-sm);
  font-weight: var(--fw-light);
  color: var(--color-text-subtle);
  letter-spacing: 0.02em;
}
.team__role dd {
  margin: 0;
  font-size: clamp(18px, 1.6vw, 22px);
  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__text::before {
  content: "\201C";
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(56px, 6vw, 88px);
  line-height: 0.75;
  color: var(--color-accent-blue);
  margin-bottom: var(--space-4);
}
.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: clamp(64px, 8vw, 120px);
}
.research__insights,
.research__constraints,
.research__artefacts {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.insight-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}
.insight {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  min-height: 160px;
  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-semibold);
  line-height: var(--lh-tight);
  /* Neutral — subordinate to the section-level blue eyebrow */
  color: var(--color-text);
}
.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;
  /* Anchor image to top so any blank strip baked into the file falls
     below the visible area (clipped by overflow:hidden on the container)
     rather than appearing in the centre of the letterbox. */
  object-position: top center;
}
.artefact__caption {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--color-text);
}

/* Process artefact grids (research + testing) — 3 equal columns,
   no fixed aspect ratio so images display at their natural height. */
.research__artefacts .artefact-grid,
.testing__artefacts .artefact-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.research__artefacts .artefact__media,
.testing__artefacts .artefact__media {
  aspect-ratio: unset;
  height: auto;
}
.research__artefacts .artefact__media img,
.testing__artefacts .artefact__media img {
  width: 100%;
  height: auto;
  object-fit: unset;
  object-position: top center;
}

/* Featured artefact grid — first image spans full width; remaining
   images share a 2-column row below it. */
.artefact-grid--featured {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: var(--space-5);
  row-gap: clamp(40px, 5vw, 64px);
}
.artefact-grid--featured > .artefact:first-child {
  grid-column: 1 / -1; /* full width */
}
/* First image: show the whole photo at its natural proportions — no crop */
.artefact-grid--featured > .artefact:first-child .artefact__media img {
  height: auto;
  max-height: none;
  object-fit: unset;
  object-position: unset;
}

/* Remaining items: explicit fixed height so height:100% on the child <img>
   resolves correctly. aspect-ratio alone with height:auto leaves height
   indefinite in some browsers — object-fit:cover then can't fill the
   container, creating the gap the user sees.
   Each image fills its column width (1fr) at this shared height;
   object-fit:cover + object-position:top clips any blank strip at the
   bottom of the image file, not the top content. */
.artefact-grid--featured > .artefact:not(:first-child) .artefact__media {
  aspect-ratio: unset;
  height: auto;
}
.artefact-grid--featured > .artefact:not(:first-child) .artefact__media img {
  width: 100%;
  height: auto;
  object-fit: unset;
  object-position: unset;
}

/* ─────────────────────────────────────────────────────────────────────
   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: clamp(18px, 1.5vw, 24px);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  padding-left: var(--space-6);
  border-left: 3px solid #385EF1;
  max-width: 707px;
  margin-top: clamp(32px, 4vw, 64px);
}

.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;
  /* No gap needed — the sticky wrapper owns all top spacing internally. */
  gap: 0;
}

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

/* Sticky header + tab strip ─────────────────────────────────────────────── */
.decisions__sticky {
  position: sticky;
  /* Nav is 72px tall (32px logo + 2×20px padding). Offset by nav height
     so the decisions header sticks just below the nav, never behind it. */
  top: 72px;
  z-index: 20;

  /* Match page background so scrolling decisions slide under it cleanly. */
  background: var(--color-bg);

  /* Internal spacing: eyebrow/title at top, tabs at bottom. */
  display: flex;
  flex-direction: column;
  gap: var(--space-10);

  /* Breathing room above the section title; no bottom padding so the tab
     underline sits flush — the gap in decisions__tabs handles space to panels. */
  padding-block: var(--space-12) 0;

  /* Soft shadow hides decisions as they scroll underneath. */
  box-shadow: 0 12px 32px 12px var(--color-bg);
}

.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 {
  position: relative;
  background-color: var(--color-surface-1);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  display: flex;
  justify-content: center;
}

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

/* Single image: auto height so phone images show full without cropping. */
.decision__image:not(.decision__image--split) img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 580px;
  object-fit: contain;
  object-position: top center;
  border-radius: var(--radius-md);
}

.decision__image:not(.decision__image--split) picture {
  display: block;
  width: 100%;
}

/* 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);
}

/* Optional per-image label inside a split pair */
.decision__split-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}
.decision__split-label {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-light);
  color: var(--color-text-subtle);
  text-align: center;
}

/* Red indicator — overlaid inside the image box, 16px from the image left edge */
.decision__indicator {
  position: absolute;
  left: 16px;
  width: 3px;
  height: 56px;
  background: var(--color-accent-red);
  border-radius: 2px;
  transform: translateY(-50%);
  z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────────
   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;
}

/* Soft shadow on colour and button images; organisms are shadow-free. */
.ds-grid--cols-2 .artefact__media,
.ds-grid--buttons .artefact__media {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.09),
    0 1px 3px  rgba(0, 0, 0, 0.04);
}

/* 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 left;
}

.design-system__stat {
  font-size: clamp(18px, 1.5vw, 24px);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  padding-left: var(--space-6);
  border-left: 3px solid #385EF1;
  max-width: 707px;
  margin-top: clamp(32px, 4vw, 64px);
}

/* ─────────────────────────────────────────────────────────────────────
   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: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-5);
}

.labeled-list__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
}

.labeled-list__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  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-20);
}

/* Horizontal scroll-on-scroll strip */
.screen-strip-wrapper {
  /* Height is set by JS to = 100vh + strip scroll distance */
  margin-inline: calc(-1 * var(--content-gutter));
}

.screen-strip-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 2.5vw, 36px);
  background-color: var(--color-bg-light);
}
.screen-strip-sticky .section-header {
  padding-inline: var(--content-gutter);
}

.screen-strip {
  display: flex;
  gap: clamp(16px, 1.8vw, 28px);
  padding-inline: var(--content-gutter);
  will-change: transform;
}

.screen-strip__item {
  flex-shrink: 0;
  width: clamp(200px, 20vw, 280px);
  aspect-ratio: 360 / 760;
  background-color: var(--color-surface-1);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.section--light .screen-strip__item {
  background-color: rgba(0, 0, 0, 0.03);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.09);
}
.screen-strip__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

@media (prefers-reduced-motion: reduce) {
  .screen-strip-wrapper { margin-inline: 0; height: auto !important; }
  .screen-strip-sticky { position: static; height: auto; overflow-x: auto; }
  .screen-strip { transform: none !important; padding-inline: 0; }
}

/* 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);
}

/* Prototype caption is larger and more prominent than artefact captions */
.prototype-stage .artefact__caption {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  color: var(--color-text-on-light-muted);
}

/* On light sections the dark surface-1 looks out of place —
   match the placeholder card treatment used by screen-strip items. */
.section--light .prototype-stage {
  background-color: rgba(0, 0, 0, 0.03);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.09),
    0 1px 3px  rgba(0, 0, 0, 0.04);
}

/* 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;
}

/* ─────────────────────────────────────────────────────────────────────
   Hero — App Store / Play Store links
   ──────────────────────────────────────────────────────────────────── */
.hero__store-links {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.store-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-5);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}
.store-link:hover {
  border-color: rgba(255, 255, 255, 0.45);
  background-color: rgba(255, 255, 255, 0.04);
}
.store-link svg {
  width: 20px;
  height: 20px;
  fill: var(--color-text);
  flex-shrink: 0;
}
.store-link__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.store-link__sub {
  font-size: 10px;
  font-weight: var(--fw-light);
  color: var(--color-text-muted);
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.store-link__name {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  line-height: 1.2;
}

/* ─────────────────────────────────────────────────────────────────────
   Insight staggered scroll reveal
   The grid is observed as one unit; when it enters the viewport the grid
   gets is-insights-visible and CSS cascades each card in left→right,
   top→bottom. Observing the grid (not individual items) avoids the race
   between the section reveal (opacity 0→1) and the insight transitions.
   ──────────────────────────────────────────────────────────────────── */
.js-reveal .insight {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
}
.js-reveal .insight-grid.is-insights-visible .insight {
  opacity: 1;
  transform: none;
}
.js-reveal .insight-grid.is-insights-visible .insight:nth-child(1) { transition-delay: 0.00s; }
.js-reveal .insight-grid.is-insights-visible .insight:nth-child(2) { transition-delay: 0.12s; }
.js-reveal .insight-grid.is-insights-visible .insight:nth-child(3) { transition-delay: 0.24s; }
.js-reveal .insight-grid.is-insights-visible .insight:nth-child(4) { transition-delay: 0.36s; }
.js-reveal .insight-grid.is-insights-visible .insight:nth-child(5) { transition-delay: 0.48s; }
.js-reveal .insight-grid.is-insights-visible .insight:nth-child(6) { transition-delay: 0.60s; }
.js-reveal .insight-grid.is-insights-visible .insight:nth-child(7) { transition-delay: 0.72s; }
.js-reveal .insight-grid.is-insights-visible .insight:nth-child(8) { transition-delay: 0.84s; }

/* ─────────────────────────────────────────────────────────────────────
   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); }
  }

  /* ── Mobile override ────────────────────────────────────────────────
     On narrow viewports a single decision card is almost as tall as the
     screen, so the desktop range (15%→85%) keeps the card blurred for
     most of the reading time. Instead: snap visible almost immediately
     as the card enters, hold it clear while reading, and only begin
     to blur/fade once it is ~80% scrolled past centre. */
  @media (max-width: 768px) {
    @keyframes decision-view-mobile {
      /* Quick fade-in: fully clear by the time 10% of the card has entered */
      0%   { opacity: 0; transform: translateY(20px); filter: blur(4px); }
      10%  { opacity: 1; transform: none;             filter: blur(0);   }
      /* Long readable hold */
      78%  { opacity: 1; transform: none;             filter: blur(0);   }
      /* Exit: gentle blur only as it's mostly past centre */
      100% { opacity: 0; transform: translateY(-12px); filter: blur(4px); }
    }

    .js-reveal .decision {
      animation-name: decision-view-mobile;
      /* Full cover range: the keyframe percentages above govern timing */
      animation-range: cover 0% cover 100%;
    }
  }
}

/* ─────────────────────────────────────────────────────────────────────
   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);
  }
}

@media (max-width: 800px) {
  .site-footer {
    height: auto;
    padding-block: clamp(48px, 8vw, 80px);
  }
  .site-footer__inner {
    height: auto;
    gap: clamp(32px, 5vw, 48px);
  }
}