.project-index {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(5rem, 7vw, 7.5rem) 0 clamp(6rem, 9vw, 9rem);
  border-bottom: 1px solid #233c56;
  background:
    radial-gradient(circle at 78% 22%, rgb(0 118 224 / .14), transparent 30rem),
    repeating-linear-gradient(0deg, rgb(94 141 181 / .045) 0 1px, transparent 1px 3rem),
    linear-gradient(180deg, #071321, #020711 70%);
}
.project-index::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .22;
  background-image: linear-gradient(rgb(77 128 171 / .15) 1px, transparent 1px), linear-gradient(90deg, rgb(77 128 171 / .15) 1px, transparent 1px);
  background-size: 4rem 4rem;
  mask-image: linear-gradient(180deg, #000, transparent 88%);
}
.project-index-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, .55fr);
  align-items: end;
  gap: clamp(2rem, 6vw, 7rem);
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #597188;
}
.project-index-heading .section-kicker { margin-bottom: .8rem; color: #63c5ff; }
.project-index-heading .dimensional-title { font-size: clamp(3.4rem, 5vw, 5.8rem); }
.project-index-heading > p { max-width: 31rem; margin: 0; color: #c9d5e0; font-size: 1.05rem; }

.project-filter {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem 1.4rem;
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
  padding: .75rem;
  border: 1px solid #5f7489;
  clip-path: polygon(.7rem 0, calc(100% - .7rem) 0, 100% .7rem, 100% calc(100% - .45rem), calc(100% - .45rem) 100%, 0 100%, 0 .7rem);
  background: linear-gradient(110deg, #0b1b2c, #030b16 72%, #08294a);
  box-shadow: inset .2rem 0 0 #159fff, inset 0 1px 0 rgb(255 255 255 / .1), 0 .8rem 1.4rem rgb(0 0 0 / .38);
}
.project-filter-label { padding-left: .75rem; color: #a7bad0; font: 900 .65rem/1.2 Arial, sans-serif; letter-spacing: .15em; text-transform: uppercase; }
.project-filter-controls { display: flex; flex-wrap: wrap; gap: .45rem; }
.project-filter button {
  position: relative;
  min-width: 5.3rem;
  min-height: 2.8rem;
  padding: .65rem 1rem;
  border: 1px solid #6f8295;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - .55rem) 0, 100% .55rem, 100% 100%, .4rem 100%, 0 calc(100% - .4rem));
  color: #e7edf3;
  background: #071421;
  cursor: pointer;
  font: 900 .72rem/1 Arial, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.project-filter button::after { content: ""; position: absolute; right: .55rem; bottom: .35rem; left: .55rem; height: .12rem; background: transparent; }
.project-filter button:hover { border-color: #72caff; background: #0b2944; }
.project-filter button[aria-pressed="true"] { border-color: #9bdbff; color: #fff; background: linear-gradient(110deg, #0a4380, #06294d); box-shadow: inset 0 0 1rem rgb(0 157 255 / .2); }
.project-filter button[aria-pressed="true"]::after { background: #27b3ff; box-shadow: 0 0 .5rem #009cff; }
.project-filter button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px #020711; }
.project-filter-status { margin: 0; padding-right: .75rem; color: #b9c8d7; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }

.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 2vw, 2rem); margin: 0; padding: 0; }
.project-card { display: block; min-width: 0; }
.project-card[hidden] { display: none; }
.project-card article {
  position: relative;
  display: flex;
  min-height: 29rem;
  flex-direction: column;
  padding: 2rem .55rem .55rem;
  overflow: hidden;
  border: 1px solid #6e8295;
  outline: 1px solid #0d8ee6;
  outline-offset: -.32rem;
  clip-path: polygon(1rem 0, calc(100% - .85rem) 0, 100% .85rem, 100% calc(100% - .7rem), calc(100% - .7rem) 100%, .7rem 100%, 0 calc(100% - .7rem), 0 1rem);
  background:
    linear-gradient(90deg, #159fff 0 .15rem, transparent .16rem calc(100% - .16rem), #147fd0 calc(100% - .15rem)),
    repeating-linear-gradient(0deg, rgb(124 159 187 / .025) 0 1px, transparent 1px .4rem),
    #06101b;
  box-shadow: 0 1rem 1.7rem rgb(0 0 0 / .48), 0 0 .7rem rgb(0 132 235 / .16);
}
.project-card article::before { content: "Project dossier"; position: absolute; top: .55rem; left: 1.35rem; color: #75ccff; font: 900 .58rem/1 Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.project-card article::after { content: ""; position: absolute; top: 0; right: 12%; width: 32%; height: .16rem; background: #2bb1ff; box-shadow: 0 0 .65rem #008ff4; }
.project-card-copy { padding: 1.2rem 1rem 1.25rem; }
.project-card-copy p { margin: 0 0 .5rem; color: #6bc9ff; font: 900 .63rem/1.25 Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.project-card h3 { margin: 0; color: #f4f7fa; font: italic 950 clamp(1.45rem, 1.8vw, 2rem)/.95 var(--heading); letter-spacing: -.02em; text-transform: uppercase; text-shadow: .045em .06em 0 #26394b, 0 .12em .16em #000; }
.project-card-media {
  position: relative;
  order: -1;
  overflow: hidden;
  border: .16rem solid #8093a5;
  outline: 1px solid #172a3d;
  clip-path: polygon(0 .75rem, .75rem 0, calc(100% - .75rem) 0, 100% .75rem, 100% calc(100% - .5rem), calc(100% - .5rem) 100%, .5rem 100%, 0 calc(100% - .5rem));
  background: #020711;
  box-shadow: 0 0 0 .2rem #071321, 0 .7rem 1rem #000;
}
.project-card-media::after { content: ""; position: absolute; inset: 0; border-top: 2px solid rgb(106 201 255 / .7); box-shadow: inset 0 -2rem 2.5rem rgb(0 5 12 / .2); pointer-events: none; }
.project-card-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .28s ease; }
.project-card:nth-child(1) img { object-position: center 50%; }
.project-card:nth-child(2) img { object-position: center 52%; }
.project-card:nth-child(3) img { object-position: center 54%; }
.project-card:nth-child(4) img { object-position: center 52%; }
.project-card:nth-child(5) img { object-position: center 48%; }
.project-card:nth-child(6) img { object-position: center 52%; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .project-card:hover .project-card-media img { transform: scale(1.018); }
}

@media (max-width: 75rem) {
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-card article { min-height: 31rem; }
  .project-filter { grid-template-columns: 1fr auto; }
  .project-filter-label { grid-column: 1 / -1; }
}

@media (max-width: 47.5rem) {
  .project-index { padding-block: 4.8rem 6rem; }
  .project-index-heading { grid-template-columns: 1fr; align-items: start; gap: 1.2rem; }
  .project-index-heading .dimensional-title { max-width: 7ch; font-size: clamp(3.3rem, 15vw, 4.7rem); }
  .project-index-heading > p { font-size: 1rem; }
  .project-filter { display: block; padding: .7rem; }
  .project-filter-label { display: block; margin: 0 0 .65rem; padding-left: .25rem; }
  .project-filter-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-filter button { min-width: 0; width: 100%; }
  .project-filter button:first-child { grid-column: 1 / -1; }
  .project-filter-status { margin-top: .7rem; padding: 0 .25rem; white-space: normal; }
  .project-grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .project-card article { min-height: 0; }
  .project-card-media img { aspect-ratio: 16 / 10; }
  .project-card-copy { min-height: 7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .project-card-media img { transition: none; }
}

@media (forced-colors: active) {
  .project-filter,
  .project-filter button,
  .project-card article,
  .project-card-media { border: 2px solid CanvasText; }
  .project-filter button[aria-pressed="true"] { outline: 3px solid Highlight; }
}

/* Expanded photo-library controls and viewer */
.project-filter { grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr) auto; align-items: end; }
.project-filter-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.project-filter-group legend { margin: 0 0 .65rem; padding-left: .25rem; color: #a7bad0; font: 900 .65rem/1.2 Arial, sans-serif; letter-spacing: .15em; text-transform: uppercase; }
.project-filter-summary { display: grid; justify-items: end; gap: .65rem; padding: 0 .25rem .05rem 0; }
.project-filter-reset { min-width: 8.6rem !important; color: #fff !important; border-color: #79cbff !important; }
.project-filter-reset[hidden] { display: none; }
.project-library-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.project-library-heading p { margin: 0; }
.project-library-heading h3 { margin: 0; color: #e9f1f8; font: italic 900 clamp(1.15rem, 1.6vw, 1.55rem)/1 var(--heading); letter-spacing: .02em; text-transform: uppercase; }
.project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.project-card-open { position: relative; display: block; width: 100%; padding: .45rem; overflow: hidden; border: 1px solid #6e8295; border-radius: 0; outline: 1px solid #0d8ee6; outline-offset: -.27rem; clip-path: polygon(.8rem 0, calc(100% - .7rem) 0, 100% .7rem, 100% calc(100% - .55rem), calc(100% - .55rem) 100%, .55rem 100%, 0 calc(100% - .55rem), 0 .8rem); color: #fff; background: linear-gradient(130deg, #0a1827, #030a13); box-shadow: 0 .8rem 1.4rem rgb(0 0 0 / .42), 0 0 .7rem rgb(0 132 235 / .13); cursor: pointer; text-align: left; }
.project-card-open::after { content: "View"; position: absolute; top: .7rem; right: .7rem; padding: .35rem .5rem; border: 1px solid #81cfff; color: #fff; background: rgb(1 11 22 / .88); font: 900 .58rem/1 Arial, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.project-card-open:focus-visible { outline: 3px solid #fff; outline-offset: 4px; box-shadow: 0 0 0 7px #0875bb; }
.project-card .project-card-media { display: block; order: initial; }
.project-card .project-card-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.project-card .project-card-copy { display: flex; min-height: 0; align-items: center; justify-content: space-between; gap: .7rem; padding: .8rem .7rem .7rem; color: #72caff; font: 900 .62rem/1.2 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.project-card .project-card-copy strong { color: #f3f7fb; font-size: .68rem; }
.project-card:nth-child(n) img { object-position: center; }
body.viewer-open { overflow: hidden; }
body.viewer-open .back-to-top,
body.viewer-open .project-color-rail { opacity: 0; visibility: hidden; pointer-events: none; }
.project-viewer[hidden] { display: none; }
.project-viewer { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: clamp(.65rem, 2vw, 1.5rem); }
.project-viewer-backdrop { position: absolute; inset: 0; background: rgb(1 5 11 / .94); backdrop-filter: blur(.35rem); }
.project-viewer-panel { position: relative; display: grid; width: min(94rem, 100%); max-height: calc(100dvh - 2rem); grid-template-rows: auto minmax(0, 1fr) auto; padding: clamp(.7rem, 1.5vw, 1.2rem); border: 1px solid #71879b; outline: 1px solid #0b8fe6; outline-offset: -.35rem; clip-path: polygon(1.2rem 0, calc(100% - 1rem) 0, 100% 1rem, 100% calc(100% - .8rem), calc(100% - .8rem) 100%, .8rem 100%, 0 calc(100% - .8rem), 0 1.2rem); background: linear-gradient(145deg, #0b1928, #020710 68%, #062343); box-shadow: 0 1.8rem 5rem #000, inset .2rem 0 0 #169fff; }
.project-viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .35rem .4rem .8rem; }
.project-viewer-kicker { margin: 0 0 .22rem; color: #65c7ff; font: 900 .62rem/1 Arial, sans-serif; letter-spacing: .17em; text-transform: uppercase; }
.project-viewer h2 { margin: 0; color: #fff; font: italic 900 clamp(1.15rem, 2vw, 1.7rem)/1 var(--heading); text-transform: uppercase; }
.project-viewer h2:focus { outline: 2px solid #fff; outline-offset: 4px; }
.project-viewer button { min-height: 2.9rem; padding: .7rem 1rem; border: 1px solid #7892a9; border-radius: 0; clip-path: polygon(0 0, calc(100% - .55rem) 0, 100% .55rem, 100% 100%, .4rem 100%, 0 calc(100% - .4rem)); color: #fff; background: #071522; cursor: pointer; font: 900 .68rem/1 Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.project-viewer button:hover { border-color: #76cdff; background: #0a3154; }
.project-viewer button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px #0875bb; }
.project-viewer-frame { display: grid; min-height: 0; margin: 0; padding: .35rem; border: 1px solid #7b91a5; background: #01050a; box-shadow: inset 0 0 0 1px #173249, 0 1rem 2rem #000; }
.project-viewer-frame img { display: block; width: 100%; height: min(68dvh, 54rem); object-fit: contain; }
.project-viewer-frame figcaption { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem .55rem .35rem; color: #bcd0e1; font: 900 .65rem/1.2 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.project-viewer-count { color: #68c9ff; white-space: nowrap; }
.project-viewer-controls { display: flex; justify-content: space-between; gap: .75rem; padding-top: .75rem; }
.project-viewer-controls button { min-width: 8.5rem; }

@media (max-width: 75rem) {
  .project-filter { grid-template-columns: 1fr 1fr; }
  .project-filter-summary { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.5rem) {
  .project-filter { display: grid; grid-template-columns: 1fr; }
  .project-filter-summary { grid-column: auto; }
  .project-filter-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-filter-controls button:first-child { grid-column: auto; }
  .project-filter-summary { align-items: stretch; }
  .project-filter-reset { width: auto !important; }
  .project-library-heading { display: block; }
  .project-library-heading h3 { margin-top: .45rem; }
  .project-grid { grid-template-columns: 1fr; }
  .project-card .project-card-media img { aspect-ratio: 4 / 3; }
  .project-card .project-card-copy { min-height: 0; }
  .project-viewer { padding: .35rem; }
  .project-viewer-panel { max-height: calc(100dvh - .7rem); padding: .58rem; }
  .project-viewer-frame img { height: min(62dvh, 34rem); }
  .project-viewer-frame figcaption { font-size: .57rem; }
  .project-viewer-controls button { min-width: 0; flex: 1; }
}
@media (forced-colors: active) {
  .project-card-open, .project-viewer-panel, .project-viewer-frame, .project-viewer button { border: 2px solid CanvasText; }
}

/* Fixed project-color navigator: the Projects counterpart to the homepage section rail. */
.project-color-rail {
  position: fixed;
  z-index: 40;
  top: 50%;
  right: 1.75rem;
  display: none;
  width: 12rem;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-50%) translateX(.8rem);
  transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
}
.project-color-rail-list,
.project-color-rail-list > li { margin: 0; padding: 0; list-style: none; }
.project-color-rail-list > li::marker { content: ""; }

@media (min-width: 80rem) and (min-height: 44rem) {
  .project-color-rail { display: block; }
  .project-color-rail.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
    transition-delay: 0s;
  }
  .project-color-rail-list {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .3rem;
    padding: .35rem 0;
  }
  .project-color-rail-list::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: .7rem;
    right: .72rem;
    bottom: .7rem;
    width: 1px;
    background: linear-gradient(180deg, transparent, #71869a 12%, #168ddd 50%, #71869a 88%, transparent);
    box-shadow: 0 0 .45rem rgb(21 163 255 / .26);
  }
  .project-color-rail button {
    position: relative;
    display: grid;
    width: 6.75rem;
    min-height: 2.75rem;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .25rem;
    overflow: hidden;
    margin: 0;
    padding: .48rem 2rem .48rem .72rem;
    border: 1px solid transparent;
    border-radius: 0;
    clip-path: polygon(.55rem 0, 100% 0, 100% 100%, .55rem 100%, 0 calc(100% - .55rem), 0 .55rem);
    color: #e7eef5;
    background: rgb(4 12 22 / .84);
    cursor: pointer;
    font-family: var(--body);
    text-align: left;
    text-transform: uppercase;
    transition: width 220ms ease, border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
  }
  .project-color-rail-label {
    color: #e7eef5;
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .11em;
    line-height: 1.1;
    white-space: nowrap;
  }
  .project-color-rail-count {
    display: none;
    color: #9fc2da;
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.1;
    white-space: nowrap;
  }
  .project-color-rail-node {
    position: absolute;
    right: .43rem;
    width: .68rem;
    height: .68rem;
    border: 2px solid #8fa1b2;
    background: #071321;
    transform: rotate(45deg);
    box-shadow: 0 0 0 3px #071321;
    transition: border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
  }
  .project-color-rail button:hover,
  .project-color-rail button:focus-visible,
  .project-color-rail button[aria-pressed="true"] {
    width: 12rem;
    border-color: #879caf;
    background: linear-gradient(105deg, rgb(4 12 22 / .98), rgb(9 31 52 / .98));
    box-shadow: inset -.28rem 0 0 #18a8ff, 0 .75rem 1.25rem rgb(0 0 0 / .48), 0 0 .8rem rgb(0 143 255 / .22);
  }
  .project-color-rail button[aria-pressed="true"] .project-color-rail-count { display: block; }
  .project-color-rail button:hover .project-color-rail-node,
  .project-color-rail button:focus-visible .project-color-rail-node,
  .project-color-rail button[aria-pressed="true"] .project-color-rail-node {
    border-color: #e5f5ff;
    background: #168ee8;
    box-shadow: 0 0 0 3px #071321, 0 0 .8rem #159fff;
  }
  .project-color-rail button:focus-visible,
  .project-color-rail-actions a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
  }
  .project-color-rail-actions {
    display: grid;
    gap: .45rem;
    margin-top: .75rem;
    padding-top: .8rem;
    border-top: 1px solid #63798d;
  }
  .project-color-rail-actions a {
    display: grid;
    min-height: 3.15rem;
    align-content: center;
    padding: .58rem .75rem;
    border: 1px solid #71869a;
    clip-path: polygon(.55rem 0, 100% 0, 100% calc(100% - .55rem), calc(100% - .55rem) 100%, 0 100%, 0 .55rem);
    color: #f3f7fb;
    background: linear-gradient(110deg, #0a1928, #040c16);
    box-shadow: inset -.18rem 0 0 #168ddd, 0 .6rem 1rem rgb(0 0 0 / .4);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .1em;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
  }
  .project-color-rail-call {
    border-color: #72caff !important;
    background: linear-gradient(110deg, #095ca8, #07345f) !important;
    box-shadow: inset -.2rem 0 0 #64d0ff, 0 .65rem 1.1rem rgb(0 0 0 / .45), 0 0 .75rem rgb(0 153 255 / .28) !important;
  }
  .project-color-rail-call span { color: #d9f1ff; font-size: .57rem; }
  .project-color-rail-call strong { margin-top: .18rem; color: #fff; font-size: .75rem; letter-spacing: .08em; }
  .project-color-rail-actions a:hover { border-color: #c2eaff; background: #0b3154; }
}

.project-filter { scroll-margin-top: 6rem; }

@media (prefers-reduced-motion: reduce) {
  .project-color-rail,
  .project-color-rail button,
  .project-color-rail-node { transition: none; }
}

@media (forced-colors: active) {
  .project-color-rail button,
  .project-color-rail-actions a { border: 2px solid CanvasText; }
  .project-color-rail button[aria-pressed="true"] { outline: 3px solid Highlight; }
}