/* Work index + product pages (layout measured from the template walkthrough frames 336–395 at 1572px). */

.cr-mono { font: 500 12px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cr-mono--ink { color: var(--ink); }
.cr-sep { display: inline-block; width: 4px; height: 4px; margin: 0 10px; background: #C6CACF; vertical-align: middle; flex: none; }
.cr-sq { display: inline-block; width: 6px; height: 6px; background: var(--signal); flex: none; }
.cr-note { font-size: 14px; line-height: 1.45; color: var(--muted); }

/* Corner brackets sit 11px in on these panels (shared default is 16px). */
.cr-stat > .brk__c:nth-of-type(1), .cr-open > .brk__c:nth-of-type(1), .cr-prod__a > .brk__c:nth-of-type(1) { top: 11px; left: 11px; }
.cr-stat > .brk__c:nth-of-type(2), .cr-open > .brk__c:nth-of-type(2), .cr-prod__a > .brk__c:nth-of-type(2) { top: 11px; right: 11px; }
.cr-stat > .brk__c:nth-of-type(3), .cr-open > .brk__c:nth-of-type(3), .cr-prod__a > .brk__c:nth-of-type(3) { bottom: 11px; left: 11px; }
.cr-stat > .brk__c:nth-of-type(4), .cr-open > .brk__c:nth-of-type(4), .cr-prod__a > .brk__c:nth-of-type(4) { bottom: 11px; right: 11px; }

/* Left-to-right wipe used for headings, ledes and panels (page load + on scroll). */
.js [data-wipe] { clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--ease); transition-delay: var(--d, 0s); }
.js [data-wipe].is-in { clip-path: inset(0 -2px 0 0); }

/* Shared section header: chip + h2 */
.cr-head { padding: 112px var(--pad) 56px; border-bottom: 1px solid var(--line); }
.cr-head .chip { margin-bottom: 26px; }

/* ---------- 01 Hero ---------- */
.cr-hero__wrap { display: grid; grid-template-columns: minmax(0, 1fr) 568px; gap: 48px; align-items: center; padding: 112px var(--pad) 95px; }
.cr-hero__copy .chip { margin-bottom: 26px; }
.cr-hero__h { max-width: 470px; font: 700 56px/62px var(--sans); letter-spacing: -0.03em; }
.cr-hero__soft { display: block; color: #5A6067; }
.cr-hero__lede { margin-top: 20px; max-width: 436px; letter-spacing: 0; }
.cr-hero__actions { margin-top: 40px; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.cr-hero__actions .btn { min-width: 227px; }
.cr-hero__copy .mailcopy { margin-top: 12px; }

.cr-map { position: relative; margin: 0; padding: 24px 24px 26px; }
.cr-map > .brk__c:nth-of-type(1) { top: 0; left: 0; }
.cr-map > .brk__c:nth-of-type(2) { top: 0; right: 0; }
.cr-map > .brk__c:nth-of-type(3) { bottom: 0; left: 0; }
.cr-map > .brk__c:nth-of-type(4) { bottom: 0; right: 0; }
.cr-map > .brk__c { border-color: #C5C9CE; }
.cr-wall__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.cr-wall__a { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #E0E2E5; }
.cr-wall__a img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cr-map__cap { display: flex; align-items: center; gap: 8px; margin-top: 20px; color: var(--muted); }
.cr-poster__cap { font-size: 14px; color: var(--muted); }

/* ---------- 02 Stats with grey block cover ---------- */
.cr-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.cr-stat { position: relative; display: flex; flex-direction: column; min-height: 208px; padding: 52px var(--pad) 0; overflow: hidden; }
.cr-stat + .cr-stat { border-left: 1px solid var(--line); }
.cr-stat__n { font-size: 52px; line-height: 1.1; color: var(--ink); white-space: nowrap; }
.cr-stat .mono-xs { margin-top: 14px; color: var(--ink-2); }
.cr-cover { display: none; }
.js .cr-cover { display: block; position: absolute; inset: 0; z-index: 3; background: #E0E2E5; pointer-events: none; }
.js .cr-stat.is-in .cr-cover, .js .cr-wall__a.is-in .cr-cover { animation: cr-cover .85s steps(6, jump-none) forwards; animation-delay: var(--d, 0s); }
@keyframes cr-cover { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }

/* ---------- Tiles (How we build / On every product) ---------- */
.cr-tiles { display: grid; grid-template-columns: repeat(3, 1fr); }
.cr-tile { padding: 40px var(--pad) 74px; }
.cr-tiles--std .cr-tile { padding-bottom: 56px; }
.cr-tile:not(:nth-child(3n + 1)) { border-left: 1px solid var(--line); }
.cr-tiles--std .cr-tile:nth-child(n + 4) { border-top: 1px solid var(--line); }
.cr-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); background: rgba(255,255,255,.35); color: var(--signal); }
.cr-ic .ic { width: 22px; height: 22px; }
.cr-tile__h { margin-top: 30px; font: 600 22px/1.2 var(--sans); letter-spacing: -0.015em; }
.cr-tile__p { margin-top: 12px; max-width: 310px; font-size: 15px; line-height: 1.5; color: var(--muted); }

/* ---------- 04 Product list ---------- */
.cr-head--prods { padding-bottom: 40px; }
.cr-prods__h { display: flex; align-items: baseline; gap: 16px; }
.cr-count { font: 500 14px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--muted); }
.cr-filter { display: inline-flex; flex-wrap: wrap; margin-top: 34px; border: 1px solid #888F97; }
.cr-filter__b { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; font: 500 15px/1 var(--sans); color: var(--muted); transition: background-color .2s, color .2s; }
.cr-filter__b:first-child { padding: 0 15px; }
.cr-filter__b + .cr-filter__b { border-left: 1px solid var(--line); }
.cr-filter__b:hover { color: var(--ink); background: rgba(255,255,255,.5); }
.cr-filter__b[aria-pressed="true"] { background: #fff; color: var(--ink); }
.cr-filter__b[aria-pressed="true"]::before { content: ''; width: 6px; height: 6px; background: var(--signal); }

.cr-prod { border-bottom: 1px solid var(--line); }
.cr-prod:last-child, .cr-prod.is-last { border-bottom: 0; }
.cr-prod[hidden] { display: none; }
.cr-prod.is-shown { animation: cr-rowin .5s var(--ease) both; }
@keyframes cr-rowin { from { opacity: 0; transform: translateY(8px); } }
.cr-prod__a { position: relative; display: grid; grid-template-columns: 434px 292px minmax(0, 1fr) auto; align-items: center; padding: 34px var(--pad) 32px; transition: background-color .25s var(--ease); }
.cr-prod__a > .brk__c { opacity: 0; transition: opacity .25s; }
.cr-prod__a:hover, .cr-prod__a:focus-visible { background: #fff; }
.cr-prod__a:hover > .brk__c, .cr-prod__a:focus-visible > .brk__c { opacity: 1; }
.cr-prod__t { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-right: 32px; }
.cr-prod__name { font: 600 24px/1.2 var(--sans); letter-spacing: -0.02em; }
.cr-prod__meta { display: flex; align-items: center; }
.cr-prod__aside { padding-right: 24px; font-size: 14px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cr-prod__go { display: inline-flex; align-items: center; gap: 10px; justify-self: end; color: var(--ink); }
.cr-prod__go .cr-mono { color: var(--ink); }
.cr-prod__a:hover .cr-prod__go .arr { color: var(--signal); transform: translate(2px, -2px); }
.cr-prod--empty .cr-prod__a { grid-template-columns: 434px minmax(0, 1fr) auto; }
.cr-prod__empty { color: var(--muted); font-size: 16px; }

/* ---------- 06 Discuss a project ---------- */
.cr-open__wrap { padding: 112px var(--pad) 111px; }
.cr-open { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 192px; padding: 40px 47px 40px 47px; background: #fff; border: 1px solid var(--line); }
.cr-open__h { font: 600 32px/1.1 var(--sans); letter-spacing: -0.025em; }
.cr-open__p { margin-top: 14px; font-size: 19px; line-height: 1.5; color: var(--muted); }
.cr-open__p a, .cr-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
.cr-open__p a:hover, .cr-note a:hover { color: var(--signal); }
.cr-open .btn { min-width: 220px; }

/* ---------- 07 Questions ---------- */
.cr-faq { display: grid; grid-template-columns: 399px minmax(0, 1fr); padding: 128px 0; }
.cr-faq__head { padding: 0 var(--pad); }
.cr-faq__sub { margin-top: 30px; font-size: 15px; color: var(--muted); }
.cr-faq__list { border-top: 1px solid var(--line); }
.cr-q { border-bottom: 1px solid var(--line); }
.cr-q__h { font: inherit; }
.cr-q__b { display: flex; align-items: center; width: 100%; min-height: 82px; padding: 16px var(--pad); text-align: left; }
.cr-q__n { width: 56px; flex: none; font: 500 12px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .06em; color: var(--muted); }
.cr-q__t { flex: 1; font: 500 22px/1.25 var(--sans); letter-spacing: -0.015em; }
.cr-q__ic { position: relative; flex: none; width: 13px; height: 13px; margin-left: 24px; transition: transform .35s var(--ease); }
.cr-q__ic::before, .cr-q__ic::after { content: ''; position: absolute; background: var(--ink); }
.cr-q__ic::before { left: 0; right: 0; top: 6px; height: 1.5px; }
.cr-q__ic::after { top: 0; bottom: 0; left: 6px; width: 1.5px; }
.cr-q__b[aria-expanded="true"] .cr-q__ic { transform: rotate(45deg); }
.cr-q__b:not([aria-disabled="true"]):hover .cr-q__t { color: var(--signal); }
.cr-q__b[aria-disabled="true"] { cursor: default; }
.cr-q__in { padding: 0 var(--pad) 28px 88px; color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 640px; }
/* Rules draw in left to right, + fades in (frames 360 → 361). */
.js .cr-faq__list { border-top-color: transparent; }
.js .cr-q { border-bottom-color: transparent; position: relative; }
.js .cr-faq__list::before, .js .cr-q::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * .08s); }
.js .cr-faq__list { position: relative; }
.js .cr-faq__list::before { top: -1px; }
.js .cr-q::after { bottom: -1px; transition-delay: calc(var(--i) * .08s + .08s); }
.js .cr-faq__list.is-in::before, .js .cr-faq__list.is-in .cr-q::after { transform: none; }
.js .cr-q__ic { opacity: 0; transition: opacity .5s ease, transform .35s var(--ease); transition-delay: calc(var(--i, 0) * .08s + .5s), 0s; }
.js .cr-faq__list.is-in .cr-q__ic { opacity: 1; }

/* ---------- Product page: hero ---------- */
.cr-rhero__wrap { display: flex; flex-direction: column; align-items: flex-start; padding: 72px var(--pad) 70px; }
.cr-back { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500; color: var(--muted); transition: color .2s; }
.cr-back:hover { color: var(--signal); }
.cr-rhero__chip { margin-top: 36px; }
.cr-rhero__h { margin-top: 24px; max-width: 760px; font: 700 56px/62px var(--sans); letter-spacing: -0.03em; }
.cr-rhero__lede { margin-top: 22px; max-width: 684px; letter-spacing: 0; }
.cr-rhero__meta { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; }

/* ---------- Product page: poster ---------- */
.cr-poster__wrap { padding: 0 var(--pad) 40px; }
.cr-poster__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #E0E2E5; }

/* ---------- Product page: body + sticky summary ---------- */
.cr-rbody { display: grid; grid-template-columns: minmax(0, 627px) 359px; justify-content: space-between; gap: 48px; padding: 32px var(--pad) 112px; }
.cr-prose { color: var(--ink-2); font-size: 18px; line-height: 1.7; }
.cr-prose__h { font: 600 32px/1.15 var(--sans); letter-spacing: -0.025em; color: var(--ink); }
.cr-prose p { margin-top: 26px; }
.cr-prose__h + p { margin-top: 26px; }
.cr-prose * + .cr-prose__h { margin-top: 33px; }
.cr-bul { margin-top: 4px; }
.cr-bul li { position: relative; padding-left: 24px; }
.cr-bul li::before { content: ''; position: absolute; left: 5px; top: .78em; width: 6px; height: 6px; background: var(--signal); }

.cr-card { align-self: start; position: sticky; top: 62px; }
.cr-card__in { background: #fff; border: 1px solid var(--line); padding: 32px 31px 34px; }
.cr-card__h { font: 600 22px/1.2 var(--sans); letter-spacing: -0.015em; }
.cr-card__dl { margin: 24px 0 25px; border-top: 1px solid var(--line); }
.cr-card__dl div { display: grid; grid-template-columns: 112px 1fr; align-items: center; column-gap: 12px; min-height: 45px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cr-card__dl dt { font-size: 12px; color: var(--muted); }
.cr-card__dl dd { margin: 0; font-size: 15px; color: var(--ink); }
.cr-card .btn { width: 100%; }
.cr-card .cr-note { margin-top: 12px; text-align: center; }

/* ---------- Product page: workflow ---------- */
.cr-flow { margin-top: 26px; counter-reset: step; border-top: 1px solid var(--line); }
.cr-flow li { position: relative; padding: 20px 0 20px 52px; border-bottom: 1px solid var(--line); counter-increment: step; }
.cr-flow li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 23px; font: 500 12px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .06em; color: var(--signal); }
.cr-flow__h { font: 600 18px/1.3 var(--sans); letter-spacing: -0.01em; color: var(--ink); }
.cr-prose .cr-flow p { margin-top: 6px; font-size: 16px; line-height: 1.6; color: var(--muted); }

/* ---------- Product page: technology tiles ---------- */
.cr-head--stack { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.cr-stack__sub { max-width: 440px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.cr-tech__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin: 0 -1px -1px 0; }
.cr-tech { display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: center; min-height: 96px; padding: 24px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); transition: background-color .25s var(--ease); }
.cr-tech:hover { background: #fff; }
.cr-tech__logo { grid-row: 1 / 3; width: 28px; height: 28px; fill: var(--ink); }
.cr-tech__logo--text { display: grid; place-items: center; border: 1.5px solid var(--ink); font: 700 12px/1 var(--sans); color: var(--ink); }
.cr-tech__name, .cr-tech__role { min-width: 0; overflow-wrap: break-word; }
.cr-tech__name { font: 600 16px/1.25 var(--sans); color: var(--ink); }
.cr-tech__role { font-size: 13px; line-height: 1.3; color: var(--muted); }

/* ---------- Product page: discuss a similar project ---------- */
.cr-ask { display: grid; grid-template-columns: 400px minmax(0, 1fr); column-gap: 48px; padding: 112px var(--pad); }
.cr-ask__sub { margin-top: 30px; max-width: 300px; font-size: 15px; line-height: 1.42; color: var(--muted); }
.cr-form__card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); padding: 31px; }
.cr-discuss { align-items: flex-start; gap: 24px; justify-content: center; }
.cr-discuss__p { max-width: 560px; font-size: 19px; line-height: 1.5; color: var(--ink-2); }
.cr-discuss .cr-note { margin-top: -12px; }
.cr-form__btn { min-width: 241px; }

/* ---------- Product page: other products ---------- */
.cr-head--others .link { white-space: nowrap; }
.cr-head--others { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 34px; }
.cr-others__h { font: 600 32px/1.1 var(--sans); letter-spacing: -0.025em; }
.cr-others { display: flow-root; }
.cr-prods--others { margin-bottom: 112px; border-bottom: 1px solid var(--line); }
.cr-prods--others .cr-prod:last-child { border-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .js [data-wipe] { clip-path: none; }
  .js .cr-cover { display: none; }
  .js .cr-faq__list::before, .js .cr-q::after { transform: none; }
  .js .cr-q__ic { opacity: 1; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .cr-hero__wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); }
  .cr-prod__a { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .8fr) auto; gap: 16px; }
  .cr-rbody { grid-template-columns: minmax(0, 1fr) 340px; }
  .cr-ask { grid-template-columns: 320px minmax(0, 1fr); }
  .cr-faq { grid-template-columns: 320px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .cr-head { padding: 72px var(--pad) 40px; }
  .cr-hero__wrap { grid-template-columns: 1fr; gap: 48px; padding: 64px var(--pad) 56px; }
  .cr-hero__h { font-size: 40px; line-height: 46px; }
  .cr-hero__lede { font-size: 17px; }
  .cr-map { padding: 20px 16px; }
  .cr-poster { padding: 0 0 16px; }
  .cr-poster > .brk__c { display: none; }
  .cr-poster .cr-map__cap { margin-top: 12px; }
  .cr-stats__grid { grid-template-columns: 1fr 1fr; }
  .cr-stat { min-height: 160px; padding-top: 40px; }
  .cr-stat:nth-child(3) { border-left: 0; }
  .cr-stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .cr-stat__n { font-size: 40px; }
  .cr-tiles { grid-template-columns: 1fr; }
  .cr-tile { padding: 32px var(--pad) 40px; }
  .cr-tiles--std .cr-tile { padding-bottom: 40px; }
  .cr-tile:not(:nth-child(3n + 1)) { border-left: 0; }
  .cr-tile + .cr-tile, .cr-tiles--std .cr-tile:nth-child(n + 4) { border-top: 1px solid var(--line); }
  .cr-filter { display: flex; }
  .cr-filter__b, .cr-filter__b:first-child { padding: 0 14px; flex: 1 0 auto; justify-content: center; border-bottom: 1px solid var(--line); margin-bottom: -1px; }
  .cr-prod__a, .cr-prod--empty .cr-prod__a { grid-template-columns: 1fr auto; grid-template-areas: 't go' 'm m' 'p p'; row-gap: 10px; padding: 28px var(--pad); }
  .cr-prod__t { grid-area: t; padding-right: 12px; }
  .cr-prod__name { font-size: 21px; }
  .cr-prod__meta { grid-area: m; margin-top: 6px; flex-wrap: wrap; }
  .cr-prod__aside { grid-area: p; }
  .cr-prod__empty { grid-area: m; }
  .cr-prod__go { grid-area: go; align-self: start; }
  .cr-prod__go .cr-mono { display: none; }
  .cr-open__wrap { padding: 64px var(--pad); }
  .cr-open { flex-direction: column; align-items: flex-start; padding: 36px 24px; }
  .cr-open__h { font-size: 28px; }
  .cr-open__p { font-size: 17px; }
  .cr-faq { grid-template-columns: 1fr; padding: 72px 0; row-gap: 40px; }
  .cr-q__b { padding: 16px var(--pad); }
  .cr-q__n { width: 40px; }
  .cr-q__t { font-size: 18px; }
  .cr-q__in { padding-left: 60px; }
  .cr-rhero__wrap { padding: 48px var(--pad); }
  .cr-poster__wrap { padding: 0 var(--pad) 24px; }
  .cr-wall__grid { gap: 6px; }
  .cr-discuss__p { font-size: 17px; }
  .cr-rhero__chip { margin-top: 36px; }
  .cr-rhero__h { font-size: 40px; line-height: 46px; }
  .cr-rhero__lede { font-size: 17px; }
  .cr-rbody { grid-template-columns: minmax(0, 1fr); padding: 32px var(--pad) 72px; }
  .cr-prose { font-size: 17px; }
  .cr-prose__h { font-size: 28px; }
  .cr-card { position: static; }
  .cr-card__in { padding: 24px 20px; }
  .cr-ask { grid-template-columns: minmax(0, 1fr); padding: 72px var(--pad); row-gap: 32px; }
  .cr-form__card { padding: 20px; }
  .cr-form__btn { width: 100%; min-width: 0; }
  .cr-head--others { padding-bottom: 28px; }
  .cr-tech__grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
  .cr-tech { min-height: 84px; padding: 18px 16px; column-gap: 12px; }
  .cr-flow li { padding-left: 40px; }
  .cr-others__h { font-size: 26px; }
  .cr-prods--others { margin-bottom: 72px; }
}
@media (max-width: 480px) {
  .cr-form__btn { white-space: normal; text-align: center; height: auto; min-height: 56px; padding-block: 14px; line-height: 1.25; }
}