* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, p, figure, ol { margin: 0; }
ol { padding: 0; list-style: none; }
strong, b { font-weight: var(--v2-weight); }

.cr-page {
  --cr-rule: rgba(19, 18, 21, 0.12);
  --cr-rule-dark: var(--v2-border-on-dark);
  --cr-num: 1.75rem;
  --cr-col: calc((var(--v2-field-max) - 5 * var(--v2-grid-gutter)) / 6);
}
.cr-page .ltv2-nav { border-bottom: 1px solid var(--cr-rule); }
.cr-section { padding: var(--v2-space-96) 0 var(--v2-space-128); }
.cr-section .ltv2-eyebrow { margin-bottom: var(--v2-space-40); }

/* Photography, the Change Makers lens: a dashed crosshair draws on as the
   photo scrolls in, then spring-follows the mouse (page.js writes the
   translate inline); a thin reticle with a hexagon marker and a live
   coordinate readout sit top right. Full colour, slight push-in on hover.
   Sizes are cqw of the photo so the HUD keeps its proportion from the hero
   down to the strip tiles. */
.cr-photo { position: relative; overflow: hidden; border: 1px solid var(--cr-rule); background: var(--v2-white-smoke); container-type: inline-size; --paper: #F5F5F5; }
.ltv2-section--dark .cr-photo { border-color: var(--cr-rule-dark); background: var(--v2-shadow); }
.cr-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 1200ms var(--v2-ease-out); }
.cr-photo:hover img { transform: scale(1.025); }
.cr-photo .lens { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.lens__vt, .lens__ht { position: absolute; will-change: transform; }
.lens__vt { left: 17.98%; top: 0; width: clamp(1px, 0.161cqw, 1.5px); height: 100%; }
.lens__ht { top: 75.83%; left: 0; right: 0; height: clamp(1px, 0.161cqw, 1.5px); }
.lens__v, .lens__h { display: block; width: 100%; height: 100%; }
.lens__v { background-image: repeating-linear-gradient(to bottom, var(--paper) 0 3px, transparent 3px 6px); transform: scaleY(0); transform-origin: top; transition: transform 900ms var(--v2-ease-out) 350ms; }
.lens__h { background-image: repeating-linear-gradient(to right, var(--paper) 0 3px, transparent 3px 6px); transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--v2-ease-out) 450ms; }
.cr-photo.is-visible .lens__v { transform: scaleY(1); }
.cr-photo.is-visible .lens__h { transform: scaleX(1); }
.lens__ret { position: absolute; left: 87.48%; top: 13%; width: clamp(18px, 3.45cqw, 44px); aspect-ratio: 1; border: clamp(1px, 0.157cqw, 1.5px) solid var(--paper); opacity: 0.7; }
.lens__hex { position: absolute; left: 88.2%; top: 16%; width: clamp(5px, 0.78cqw, 10px); height: auto; will-change: transform; opacity: 0.7; }
.lens__coord { position: absolute; top: 6%; right: calc(12.52% - clamp(18px, 3.45cqw, 44px)); font-family: var(--v2-font-mono); font-size: clamp(9px, 1.15cqw, 13px); line-height: 1.3; white-space: pre; text-align: right; color: var(--paper); opacity: 0.7; }
.lens__ret, .lens__hex, .lens__coord { opacity: 0; transition: opacity 600ms ease 900ms; }
.cr-photo.is-visible .lens__ret, .cr-photo.is-visible .lens__hex, .cr-photo.is-visible .lens__coord { opacity: 0.7; }
/* Below this the readout would run into the reticle. */
@container (max-width: 260px) { .lens__coord { display: none; } }

/* Hero frames: three photos stacked, one lit at a time. page.js rotates
   .is-on; the lit frame drifts from 1 to 1.04 over its hold so the
   dissolve lands on a moving picture. */
.cr-hero__photo img { position: absolute; inset: 0; opacity: 0; scale: 1; transition: transform 1200ms var(--v2-ease-out), opacity 1400ms var(--v2-ease-inout), scale 7000ms linear; }
.cr-hero__photo img.is-on { opacity: 1; scale: 1.04; }
.cr-hero__index { position: absolute; left: 0; bottom: 0; z-index: 2; display: flex; gap: 0.75em; padding: 12px 14px; font-size: 10px; letter-spacing: 0.12em; color: var(--v2-off-white); text-shadow: 0 0 12px rgba(19, 18, 21, 0.6); pointer-events: none; }
.cr-hero__index i { font-style: normal; opacity: 0.45; transition: opacity 600ms ease; }
.cr-hero__index i.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .cr-photo img, .cr-hero__photo img, .lens__v, .lens__h, .lens__ret, .lens__hex, .lens__coord { transition: none; }
  .cr-hero__photo img.is-on { scale: 1; }
}

/* Hero. The section is its own grid so the photo can run past the field to the
   right edge while the copy stays on the six columns: the two outer tracks are
   the page margin less one gutter, so the field lands where .ltv2-field puts it. */
.cr-hero {
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(calc(var(--v2-grid-margin) - var(--v2-grid-gutter)), 1fr)
    repeat(6, minmax(0, var(--cr-col)))
    minmax(calc(var(--v2-grid-margin) - var(--v2-grid-gutter)), 1fr);
  column-gap: var(--v2-grid-gutter);
  padding: var(--v2-space-96) 0 var(--v2-space-128);
  overflow: clip;
}
.cr-hero::before { content: ""; position: absolute; top: 0; bottom: var(--v2-space-128); left: max(var(--v2-grid-margin), calc((100% - var(--v2-field-max)) / 2)); width: 1px; background: var(--cr-rule); }
.cr-hero__copy { grid-column: 2 / span 2; display: flex; flex-direction: column; align-items: flex-start; padding-left: var(--v2-grid-gutter); }
.cr-hero__copy .ltv2-eyebrow { margin-bottom: var(--v2-space-32); }
.cr-hero__title { max-width: 16ch; text-wrap: balance; }
.cr-hero__support { max-width: 34ch; margin: var(--v2-space-24) 0 var(--v2-space-40); color: var(--v2-text-secondary); font-size: var(--v2-p1); line-height: var(--v2-leading-body); }
.cr-hero__photo { grid-column: 4 / -1; aspect-ratio: 3 / 2; border-right: 0; }

/* What we do: the one place the page sells the company. */
.cr-lede { max-width: 40ch; font-size: var(--v2-s2); line-height: var(--v2-s2-lh); letter-spacing: var(--v2-tracking-display); text-wrap: pretty; }
.cr-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--v2-grid-gutter); margin-top: var(--v2-space-64); border-top: 1px solid var(--cr-rule-dark); border-bottom: 1px solid var(--cr-rule-dark); }
.cr-stat { padding: var(--v2-space-32) 0; }
.cr-stat + .cr-stat { padding-left: var(--v2-grid-gutter); border-left: 1px solid var(--cr-rule-dark); }
.cr-stat .ltv2-stat__value { display: block; white-space: nowrap; }

/* How we work: 01 to 04 in the two left columns, the room on the four right. */
.cr-how__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--v2-grid-gutter); align-items: stretch; }
.cr-values { grid-column: span 2; display: flex; flex-direction: column; border-bottom: 1px solid var(--cr-rule); }
.cr-value { flex: 1 1 auto; display: grid; grid-template-columns: var(--cr-num) minmax(0, 1fr); align-items: start; padding: var(--v2-space-24) 0; border-top: 1px solid var(--cr-rule); }
.cr-value__num { font: var(--v2-mono-l2) / var(--v2-mono-l2-lh) var(--v2-font-mono); letter-spacing: var(--v2-tracking-mono); color: var(--v2-text-secondary); transform: translateY(0.45em); }
.cr-value__title { font-size: var(--v2-s3); line-height: var(--v2-s3-lh); letter-spacing: var(--v2-tracking-display); }
.cr-value p { max-width: 34ch; margin-top: var(--v2-space-12); color: var(--v2-text-secondary); font-size: var(--v2-p2); line-height: var(--v2-leading-body); }
.cr-how__photo { grid-column: span 4; aspect-ratio: 3 / 2; }

/* Life: one strip across the field. Tracks are the photos' own proportions,
   so the row height follows the field width and nothing is squeezed. */
.cr-strip { display: grid; grid-template-columns: 8fr 15fr 7fr 7fr; gap: var(--v2-grid-gutter); aspect-ratio: 37 / 10; }
.cr-strip figure { min-height: 0; }
.cr-strip__pair { display: grid; grid-template-rows: 1fr 1fr; gap: var(--v2-grid-gutter); min-height: 0; }
/* Photos start pushed in and settle as the strip scrolls into view, one after
   another. scale, not transform, so the hover push-in still composes. */
.cr-strip img { scale: 1.1; transition: transform 1200ms var(--v2-ease-out), scale 6000ms var(--v2-ease-out) var(--cr-settle, 0ms); }
.cr-strip > :nth-child(2) img { --cr-settle: 200ms; }
.cr-strip > :nth-child(3) img { --cr-settle: 400ms; }
.cr-strip__pair > :first-child img { --cr-settle: 600ms; }
.cr-strip__pair > :last-child img { --cr-settle: 800ms; }
.cr-strip.is-visible img { scale: 1; }
.cr-life__line { margin-top: var(--v2-space-24); color: var(--v2-dusk); }

/* Open roles: the Partners row pattern. Title, chips, apply. */
.cr-roles__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--v2-space-32); }
.cr-roles__head .ltv2-eyebrow { margin-bottom: 0; }
.cr-roles__count { color: var(--v2-text-secondary); }
.cr-roles__list { margin-top: var(--v2-space-40); border-top: 1px solid var(--v2-border-on-light); }
.cr-role { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) auto; align-items: center; column-gap: var(--v2-grid-gutter); padding: var(--v2-space-24) 0; border-bottom: 1px solid var(--v2-border-on-light); transition: background-color var(--v2-dur-fast) var(--v2-ease-out); }
.cr-role:hover { background: var(--v2-white-smoke); }
.cr-role__title { display: block; max-width: 30ch; font-size: var(--v2-s3); line-height: var(--v2-s3-lh); letter-spacing: var(--v2-tracking-display); text-wrap: balance; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: text-decoration-color var(--v2-dur-fast) var(--v2-ease-out); }
.cr-role:hover .cr-role__title, .cr-role:focus-visible .cr-role__title { text-decoration-color: var(--v2-mauve); }
.cr-role__tags { display: flex; flex-wrap: wrap; gap: var(--v2-space-8); }
.cr-role__tags i { display: inline-flex; align-items: center; height: calc(var(--v2-cta-height) * 0.85); padding-inline: calc(var(--v2-cta-pad) * 0.85); border: 1px solid var(--v2-border-on-light); border-radius: var(--v2-radius-sm); color: var(--v2-text-primary); font: calc(var(--v2-mono-l2) * 0.85) / 1 var(--v2-font-mono); font-style: normal; letter-spacing: var(--v2-tracking-mono); text-transform: uppercase; white-space: nowrap; }
.cr-role__apply, .cr-roles__all { display: inline-flex; align-items: center; gap: var(--v2-space-12); color: var(--v2-slate-blue); font: var(--v2-text-xs) / 1 var(--v2-font-mono); letter-spacing: var(--v2-tracking-mono); text-transform: uppercase; white-space: nowrap; }
.cr-role__apply span, .cr-roles__all span, .ltv2-btn span { font-size: 1.2em; transition: transform 320ms var(--v2-ease-out); }
.cr-role:hover .cr-role__apply span, .cr-roles__all:hover span { transform: translateX(4px); }
.cr-roles__empty { margin: var(--v2-space-24) 0 0; color: var(--v2-text-secondary); }
/* Rows from the live board come in one after another, top to bottom. */
.cr-role.is-live { opacity: 0; translate: 0 10px; animation: cr-row-in 600ms var(--v2-ease-out) forwards; animation-delay: calc(var(--i) * 70ms); }
@keyframes cr-row-in { to { opacity: 1; translate: 0 0; } }
.cr-roles__all { margin-top: var(--v2-space-32); }

.cr-close__title { max-width: 18ch; margin-bottom: var(--v2-space-32); text-wrap: balance; }

@media (max-width: 1200px) {
  .cr-hero__copy { grid-column: 2 / span 3; }
  .cr-hero__photo { grid-column: 5 / -1; }
  .cr-values { grid-column: span 3; }
  .cr-how__photo { grid-column: span 3; aspect-ratio: auto; }
}

@media (max-width: 900px) {
  .cr-section, .cr-hero { padding: var(--v2-space-64) 0 var(--v2-space-96); }
  .cr-hero { row-gap: var(--v2-space-48); }
  .cr-hero::before { display: none; }
  .cr-hero__copy { grid-column: 2 / -2; padding-left: 0; }
  .cr-hero__photo { grid-column: 2 / -1; }
  .cr-how__grid { grid-template-columns: 1fr; row-gap: var(--v2-space-40); }
  .cr-values, .cr-how__photo { grid-column: span 1; }
  .cr-how__photo { order: -1; }
  .cr-value { flex: 0 0 auto; }
  .cr-stats { grid-template-columns: 1fr; }
  .cr-stat { padding: var(--v2-space-24) 0; }
  .cr-stat + .cr-stat { padding-left: 0; border-left: 0; border-top: 1px solid var(--cr-rule-dark); }
  .cr-role { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--v2-space-16); align-items: start; }
  .cr-role__tags { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .cr-strip { grid-template-columns: 1fr 1fr; aspect-ratio: auto; }
  .cr-strip__tall { aspect-ratio: 4 / 5; }
  .cr-strip__wide { grid-column: 1 / -1; order: 1; aspect-ratio: 3 / 2; }
  .cr-strip__pair { grid-column: 1 / -1; order: 2; grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .cr-strip__pair figure { aspect-ratio: 3 / 2; }
}

@media (max-width: 600px) {
  .cr-hero__title { max-width: none; }
  .cr-roles__head { flex-direction: column; align-items: flex-start; gap: var(--v2-space-12); }
  .cr-role__title { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cr-role, .cr-role__title, .cr-role__apply span, .cr-roles__all span, .ltv2-btn span { transition: none; }
  .cr-strip img { scale: 1; }
  .cr-role.is-live { opacity: 1; translate: none; animation: none; }
}

@media (pointer: coarse) {
  .cr-role__apply, .cr-roles__all { min-height: 44px; }
}