:root {
	--project-index-ink: var(--ai-color-navy);
	--project-index-navy: var(--ai-color-panel);
	--project-index-blue: #3b52c7;
	--project-index-soft: var(--ai-color-surface);
	--project-index-line: #dce1ea;
	--project-index-muted: #626b82;
}

.ai-project-index,
.ai-project-index * { box-sizing: border-box; }
.ai-project-index { background: var(--ai-color-white); color: var(--project-index-ink); font-family: var(--ai-font-body); overflow: hidden; }
.ai-project-index > section > .container { box-sizing: border-box; margin-left: auto; margin-right: auto; max-width: var(--ai-layout-content-width); padding-left: var(--ai-layout-content-gutter); padding-right: var(--ai-layout-content-gutter); width: 100%; }
.ai-project-index h2,
.ai-project-index p { margin-top: 0; }
.ai-project-index__overview { padding: 100px 0 66px; }
.ai-project-index__intro { align-items: end; display: grid; gap: 40px 90px; grid-template-columns: minmax(0,1.15fr) minmax(300px,.65fr); }
.ai-project-index__eyebrow { color: var(--project-index-blue); font-size: var(--ai-type-label-size); font-weight: 700; letter-spacing: .08em; margin-bottom: 17px; text-transform: uppercase; }
.ai-project-index__intro h2,
.ai-project-index__toolbar h2 { font-family: var(--ai-font-display); font-size: clamp(42px,4.7vw,66px); letter-spacing: -.04em; line-height: 1.02; margin: 0; max-width: 900px; }
.ai-project-index__intro > p { color: var(--project-index-muted); font-size: var(--ai-type-body-size); line-height: var(--ai-type-copy-leading); margin: 0; max-width: 570px; }
.ai-project-index__work { padding: 34px 0 96px; }
.ai-project-index__toolbar { display: grid; gap: 38px; grid-template-columns: 1fr; margin-bottom: 50px; }
.ai-project-index__toolbar h2 { font-size: clamp(38px,4vw,58px); }
.ai-project-index__search { margin: 0; max-width: 760px; width: 100%; }
.ai-project-index__search > label { color: var(--project-index-ink); display: block; font-size: var(--ai-type-label-size); font-weight: 700; letter-spacing: .08em; margin-bottom: 10px; text-transform: uppercase; }
.ai-project-index__search-control { align-items: center; border-bottom: 2px solid var(--project-index-ink); display: grid; grid-template-columns: 24px minmax(0,1fr) auto; min-height: 58px; }
.ai-project-index__search-control svg { fill: none; height: 20px; stroke: currentColor; stroke-linecap: round; stroke-width: 1.65; width: 20px; }
.ai-project-index__search-control input { appearance: none; background: transparent; border: 0; border-radius: 0; color: var(--project-index-ink); font: 500 16px/1.4 var(--ai-font-body); min-width: 0; outline: 0; padding: 15px 14px; width: 100%; }
.ai-project-index__search-control input::placeholder { color: #7a8192; opacity: 1; }
.ai-project-index__search-control:focus-within { border-bottom-color: var(--project-index-blue); box-shadow: 0 2px 0 var(--project-index-blue); }
.ai-project-index__search-control button { appearance: none; background: transparent; border: 0; color: var(--project-index-blue); cursor: pointer; font: 700 var(--ai-type-control-size)/1.2 var(--ai-font-body); padding: 16px 4px 16px 16px; text-transform: uppercase; }
.ai-project-index__search-control button[hidden] { display: none; }
.ai-project-index__filters { display: grid; gap: 0; grid-template-columns: repeat(var(--project-filter-count,9),minmax(0,1fr)); width: 100%; }
.ai-project-index__filters button { appearance: none; background: var(--ai-color-white); border: 1px solid var(--project-index-line); border-radius: 0; color: var(--project-index-ink); cursor: pointer; font: 600 var(--ai-type-control-size)/1.2 var(--ai-font-body); margin: -1px 0 0 -1px; min-height: 44px; min-width: 0; padding: 12px 17px; white-space: normal; word-break: normal; overflow-wrap: normal; transition: background .2s,border-color .2s,color .2s; }
.ai-project-index__filters button:hover,
.ai-project-index__filters button:focus-visible { border-color: var(--project-index-ink); position: relative; z-index: 1; }
.ai-project-index__filters button.is-active { background: var(--project-index-ink); border-color: var(--project-index-ink); color: var(--ai-color-white); position: relative; z-index: 2; }

.ai-project-index__grid { display: grid; gap: 6px; }
.ai-project-index__grid.is-searching { min-height: 260px; opacity: .45; pointer-events: none; transition: opacity .18s ease; }
.ai-project-masonry-group { display: grid; gap: 6px; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(6,clamp(58px,5vw,76px)); }
.ai-project-masonry-group.is-complete .ai-project-card:nth-child(1) { grid-column: 1; grid-row: 1 / 7; }
.ai-project-masonry-group.is-complete .ai-project-card:nth-child(2) { grid-column: 2; grid-row: 1 / 4; }
.ai-project-masonry-group.is-complete .ai-project-card:nth-child(3) { grid-column: 2; grid-row: 4 / 7; }
.ai-project-masonry-group.is-complete .ai-project-card:nth-child(4) { grid-column: 3; grid-row: 1 / 3; }
.ai-project-masonry-group.is-complete .ai-project-card:nth-child(5) { grid-column: 3; grid-row: 3 / 7; }
.ai-project-masonry-group.is-complete.is-reversed .ai-project-card:nth-child(1) { grid-column: 3; }
.ai-project-masonry-group.is-complete.is-reversed .ai-project-card:nth-child(2),
.ai-project-masonry-group.is-complete.is-reversed .ai-project-card:nth-child(3) { grid-column: 2; }
.ai-project-masonry-group.is-complete.is-reversed .ai-project-card:nth-child(4),
.ai-project-masonry-group.is-complete.is-reversed .ai-project-card:nth-child(5) { grid-column: 1; }
.ai-project-masonry-group.is-remainder-1 { grid-template-columns: 1fr; grid-template-rows: clamp(240px,28vw,390px); }
.ai-project-masonry-group.is-remainder-2 { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: clamp(260px,27vw,380px); }
.ai-project-masonry-group.is-remainder-3 { grid-template-columns: 1.45fr 1fr; grid-template-rows: repeat(2,clamp(150px,14vw,200px)); }
.ai-project-masonry-group.is-remainder-3 .ai-project-card:first-child { grid-row: 1 / 3; }
.ai-project-masonry-group.is-remainder-4 { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,clamp(190px,19vw,270px)); }
.ai-project-card { min-height: 0; min-width: 0; opacity: 0; overflow: hidden; position: relative; transform: translateY(22px); transition: opacity .65s ease,transform .65s var(--ai-motion-ease-out); }
.ai-project-card[hidden] { display: none; }
.ai-project-card > a { background: var(--project-index-navy); display: block; height: 100%; overflow: hidden; position: relative; text-decoration: none; width: 100%; }
.ai-project-card__image,
.ai-project-card__placeholder { display: block; height: 100% !important; inset: 0; max-height: none !important; max-width: none !important; object-fit: cover; position: absolute; width: 100% !important; }
.ai-project-card__placeholder { background: linear-gradient(135deg,#1a2044,#39437e); }
.ai-project-card__overlay { background: linear-gradient(180deg,rgba(8,14,37,.1) 18%,rgba(8,14,37,.88) 100%); inset: 0; position: absolute; transition: background .28s ease; }
.ai-project-card__content { color: var(--ai-color-white); display: flex; flex-direction: column; height: 100%; inset: 0; justify-content: space-between; padding: 22px; position: absolute; z-index: 2; }
.ai-project-card__type { font-size: var(--ai-type-label-size); font-weight: 700; letter-spacing: var(--ai-type-label-tracking); text-transform: uppercase; }
.ai-project-card__bottom { display: block; }
.ai-project-card__title { display: block; font-family: var(--ai-font-display); font-size: clamp(19px,1.7vw,27px); letter-spacing: -.025em; line-height: 1.06; }
.ai-project-card__meta { color: rgba(255,255,255,.74); display: block; font-size: var(--ai-type-small-size); line-height: 1.45; margin-top: 7px; }
.ai-project-card__action { align-items: center; border-top: 1px solid rgba(255,255,255,.36); display: flex; font-size: var(--ai-type-control-size); font-weight: 700; justify-content: space-between; margin-top: 16px; opacity: 0; padding-top: 11px; transform: translateY(8px); transition: opacity .25s,transform .25s; }
.ai-project-card__action span { font-size: 16px; }
.ai-project-card:hover .ai-project-card__overlay,
.ai-project-card:focus-within .ai-project-card__overlay { background: linear-gradient(180deg,rgba(8,14,37,.28),rgba(8,14,37,.95)); }
.ai-project-card:hover .ai-project-card__action,
.ai-project-card:focus-within .ai-project-card__action { opacity: 1; transform: none; }
.ai-project-index-reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s ease,transform .65s var(--ai-motion-ease-out); }
.ai-project-index-reveal.is-visible,
.ai-project-card.is-visible { opacity: 1; transform: none; }
.ai-project-index__empty { padding: 40px 0; }
.ai-project-index__load-more-wrap { align-items:center; border-bottom:1px solid var(--project-index-line); border-top:1px solid var(--project-index-line); display:flex; justify-content:space-between; margin-top:34px; min-height:88px; padding:16px 0; }
.ai-project-index__progress { color:var(--project-index-muted); font-size:var(--ai-type-small-size); margin:0; }
.ai-project-index__progress strong { color:var(--project-index-ink); font-size:var(--ai-type-small-size); font-weight:700; }
.ai-project-index__load-more { align-items:center; background:transparent; border:0; border-radius:0; color:var(--project-index-ink); cursor:pointer; display:inline-flex; font:700 var(--ai-type-label-size)/1.2 var(--ai-font-body); gap:22px; justify-content:space-between; padding:10px 0 10px 20px; text-align:left; transition:color .2s; }
.ai-project-index__load-more[hidden] { display:none; }
.ai-project-index__load-more i { font-size: 17px; font-style: normal; line-height: 1; transition: transform .25s ease; }
.ai-project-index__load-more i { align-items:center; border:1px solid var(--project-index-ink); border-radius:50%; display:flex; height:42px; justify-content:center; width:42px; }
.ai-project-index__load-more:hover, .ai-project-index__load-more:focus-visible { color:var(--project-index-blue); outline:none; }
.ai-project-index__load-more:hover i, .ai-project-index__load-more:focus-visible i { border-color:var(--project-index-blue); }
.ai-project-index__load-more:hover i, .ai-project-index__load-more:focus-visible i { transform: translateY(3px); }
.ai-project-index__load-more:focus-visible { outline: 3px solid #8290ef; outline-offset: 3px; }
.ai-project-index__load-more:disabled { cursor: wait; opacity: .7; }
.ai-project-index__load-more.is-loading i { animation: ai-project-load-more .75s ease-in-out infinite alternate; }
@keyframes ai-project-load-more { to { transform: translateY(4px); } }

/* Switch to the existing scrollable strip before category cells squeeze words. */
@media (max-width: 1200px) {
	.ai-project-index__filters { display: flex; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; scrollbar-width: thin; }
	.ai-project-index__filters button { flex: 0 0 auto; white-space: nowrap; }
}

@media (max-width: 1000px) {
	.ai-project-index__overview { padding: 82px 0 55px; }
	.ai-project-index__intro { gap: 28px; grid-template-columns: 1fr; }
	.ai-project-index__intro > p { max-width: 720px; }
	.ai-project-masonry-group { grid-template-rows: repeat(6,clamp(52px,7vw,68px)); }
}

@media (max-width: 700px) {
	.ai-project-index__overview { padding: 70px 0 45px; }
	.ai-project-index__intro h2 { font-size: clamp(38px,11vw,48px); }
	.ai-project-index__intro > p { font-size: var(--ai-type-body-size); }
	.ai-project-index__work { padding: 24px 0 72px; }
	.ai-project-index__toolbar { margin-bottom: 34px; }
	.ai-project-index__search-control { min-height: 54px; }
	.ai-project-index__search-control input { font-size: var(--ai-type-control-size); padding-left: 10px; }
	.ai-project-index__filters { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
	.ai-project-index__filters button { min-width: 0; padding: 11px 8px; white-space: normal; }
	.ai-project-index__grid { gap: 4px; }
	.ai-project-masonry-group,
	.ai-project-masonry-group.is-remainder-1,
	.ai-project-masonry-group.is-remainder-2,
	.ai-project-masonry-group.is-remainder-3,
	.ai-project-masonry-group.is-remainder-4 { display: grid; gap: 4px; grid-template-columns: 1fr; grid-template-rows: none; }
	.ai-project-masonry-group .ai-project-card,
	.ai-project-masonry-group.is-complete .ai-project-card:nth-child(n),
	.ai-project-masonry-group.is-remainder-3 .ai-project-card:first-child { aspect-ratio: 1.24; grid-column: 1; grid-row: auto; }
	.ai-project-card__content { padding: 20px; }
	.ai-project-card__title { font-size: 24px; }
	.ai-project-card__action { opacity: 1; transform: none; }
	.ai-project-index__load-more-wrap { align-items:flex-start; flex-direction:column; gap:8px; min-height:0; padding:18px 0; }
	.ai-project-index__load-more { align-self:stretch; padding-left:0; }
}

@media (prefers-reduced-motion: reduce) {
	.ai-project-index-reveal,
	.ai-project-card { opacity: 1; transform: none; transition: none; }
	.ai-project-card__action,
	.ai-project-card__overlay { transition: none; }
}

/* Readability pass for project filters and cards. */
.ai-project-index__eyebrow,.ai-project-index__search>label{font-size:var(--ai-type-label-size)}
.ai-project-card__type{font-size:var(--ai-type-label-size)}
.ai-project-card__meta,.ai-project-card__action{font-size:var(--ai-type-control-size)}
.ai-project-index__progress{font-size:var(--ai-type-small-size)}