.krg-gallery, .krg-project-detail { --krg-purple: #3d007a; --krg-chrome: #e8ecf1; box-sizing: border-box; width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: clamp(2rem, 4vw, 4.5rem) clamp(.8rem, 4vw, 4.5rem); color: #261935; font-family: inherit; }
.krg-gallery *, .krg-project-detail *, .krg-gallery *::before, .krg-project-detail *::before { box-sizing: border-box; }
.krg-gallery-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.2rem; margin-bottom: 1.5rem; }
.krg-gallery-head > div { max-width: 65ch; }
.krg-eyebrow { margin: 0 0 .5rem; color: #3d007a; font-size: .73rem; font-weight: 800; letter-spacing: .13em; }
.krg-gallery h2, .krg-project-detail h2 { margin: 0; color: #261935; font-size: clamp(1.6rem, 3vw, 2.65rem); line-height: 1.15; }
.krg-gallery-head p:last-child, .krg-lead { margin: .65rem 0 0; color: #554b60; line-height: 1.55; }
.krg-all-link, .krg-project-link { display: inline-flex; align-items: center; min-height: 2.65rem; padding: .55rem .85rem; border: 1px solid #3d007a; border-radius: .55rem; color: #3d007a !important; font-weight: 750; text-decoration: none !important; }
.krg-all-link:hover, .krg-project-link:hover { background: #efe4f8; }
.krg-filters { display: flex; gap: .4rem; overflow-x: auto; padding: .15rem 0 .75rem; scrollbar-width: thin; }
.krg-filters button { flex: none; min-height: 2.35rem; padding: .4rem .85rem; border: 1px solid #cdb8de; border-radius: 999px; background: #fff; color: #3d007a; font: inherit; font-size: .86rem; font-weight: 750; white-space: nowrap; cursor: pointer; }
.krg-filters button[aria-pressed="true"] { border-color: #3d007a; background: #3d007a; color: #fff; }
.krg-grid, .krg-related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.8rem, 2vw, 1.5rem); }
.krg-project { min-width: 0; overflow: hidden; border: 1px solid #ded5e7; border-radius: .95rem; background: #fff; box-shadow: 0 12px 30px rgba(39,0,72,.065); }
.krg-project[hidden], .krg-filter-empty[hidden] { display: none !important; }
.krg-compare { position: relative; isolation: isolate; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #dcd7e1; }
.krg-compare img { position: absolute; inset: 0; display: block; width: 100%; height: 100% !important; max-width: none; object-fit: contain; }
.krg-after-wrap { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--krg-position)) 0 0); pointer-events: none; }
.krg-divider { position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--krg-position); width: 3px; transform: translateX(-50%); background: #fff; box-shadow: 0 0 0 1px rgba(32,0,62,.35); pointer-events: none; }
.krg-divider span { position: absolute; top: 50%; left: 50%; display: grid; width: 2.45rem; height: 2.45rem; place-items: center; transform: translate(-50%, -50%); border: 2px solid #fff; border-radius: 50%; background: #3d007a; box-shadow: 0 2px 10px rgba(0,0,0,.3); color: #fff; font-size: 1.2rem; font-weight: 800; }
.krg-tag { position: absolute; z-index: 2; top: .6rem; padding: .26rem .5rem; border-radius: .35rem; background: rgba(38,0,72,.87); color: #fff; font-size: .73rem; font-weight: 800; pointer-events: none; }
.krg-tag-before { left: .6rem; } .krg-tag-after { right: .6rem; }
.krg-range-label { position: absolute; z-index: 3; inset: 0; display: block; }
.krg-range-label .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.krg-range-label input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.krg-compare:focus-within { outline: 3px solid #a362d4; outline-offset: 3px; }
.krg-project-copy { padding: 1rem 1.15rem 1.25rem; }
.krg-project-type { margin: 0 0 .3rem; color: #3d007a; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.krg-project-copy h3 { margin: 0; color: #261935; font-size: clamp(1.1rem, 2vw, 1.45rem); line-height: 1.2; }
.krg-project-copy > p:not(.krg-project-type) { margin: .55rem 0 .85rem; color: #594d65; line-height: 1.48; }
.krg-filter-empty, .krg-empty { margin: 1rem 0; padding: clamp(1.4rem, 4vw, 3rem); border: 1px solid #d8c8e8; border-radius: .9rem; background: #e8ecf1; color: #493d56; }
.krg-empty h3 { margin: 0 0 .35rem; color: #261935; font-size: clamp(1.15rem, 2vw, 1.5rem); }
.krg-empty p { margin: 0; }
.krg-related-grid { margin: 1rem 0; }
.krg-related-grid .krg-project-copy { padding: .85rem; }
.krg-project-detail { max-width: none; }
.krg-project-detail > .krg-compare { width: min(100%, 1100px); margin: 1.5rem 0; border-radius: .85rem; }
.krg-location { margin: .5rem 0; color: #3d007a; font-weight: 700; }
.krg-project-story { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; max-width: 1100px; margin: 1.5rem 0; }
.krg-project-story section { padding: 1.2rem; border: 1px solid #ded5e7; border-radius: .75rem; background: #f8f6fa; }
.krg-project-story h3 { margin: 0 0 .6rem; color: #261935; }
.krg-project-story p { margin: 0; color: #54495f; line-height: 1.58; }
.krg-gallery { background: linear-gradient(150deg, #3d007a 0%, #320065 68%, #4d1483 100%); color: #fff; }
.krg-gallery-head { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; max-width: 760px; margin: 0 auto 1.4rem; text-align: center; }
.krg-gallery-head .krg-eyebrow, .krg-detail-head .krg-eyebrow { color: #e8ecf1; }
.krg-gallery-head h2, .krg-detail-head h2 { color: #fff; }
.krg-gallery-head > p:not(.krg-eyebrow) { margin: .7rem 0 0; color: #f2ecf9; line-height: 1.55; }
.krg-gallery .krg-all-link, .krg-project-detail > .krg-all-link { margin-top: 1rem; border-color: #e8ecf1; background: #e8ecf1; color: #3d007a !important; }
.krg-gallery .krg-all-link:hover, .krg-project-detail > .krg-all-link:hover { background: #fff; }
.krg-gallery .krg-filters { justify-content: center; margin: 0 auto .4rem; }
.krg-gallery .krg-filters button { border-color: #e8ecf1; background: transparent; color: #fff; }
.krg-gallery .krg-filters button[aria-pressed="true"] { background: #e8ecf1; color: #3d007a; }
.krg-project-detail { background: linear-gradient(150deg, #3d007a, #320065); color: #fff; }
.krg-detail-head { max-width: 760px; margin: 0 auto; text-align: center; }
.krg-detail-head .krg-location, .krg-detail-head .krg-lead { color: #f2ecf9; }
.krg-project-detail > .krg-compare, .krg-project-detail > .krg-project-story { margin-left: auto; margin-right: auto; }
.krg-project-detail > .krg-all-link { display: table; margin-left: auto; margin-right: auto; }
.krg-carousel-controls[hidden], .krg-carousel-toggle[hidden] { display: none !important; }
.krg-carousel-controls { display: none; }
.krg-gallery .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media(max-width: 900px) { .krg-project-story { grid-template-columns: 1fr 1fr; } }
@media(max-width: 650px) {
  .krg-gallery, .krg-project-detail { padding: 2rem .75rem; }
  .krg-related-grid, .krg-project-story { grid-template-columns: 1fr; }
  .krg-gallery-head { align-items: center; }
  .krg-compare { aspect-ratio: 4 / 3; }
  .krg-gallery .krg-filters { justify-content: flex-start; }
  .krg-gallery-full .krg-grid { grid-template-columns: 1fr; }
  .krg-gallery-home .krg-grid { position: relative; display: flex; align-items: stretch; gap: 3%; overflow-x: auto; overflow-y: hidden; padding: .5rem 8% 1.1rem; scroll-snap-type: x mandatory; scroll-padding-inline: 8%; overscroll-behavior-inline: contain; scrollbar-width: none; perspective: 950px; -webkit-overflow-scrolling: touch; }
  .krg-gallery-home .krg-grid::-webkit-scrollbar { display: none; }
  .krg-gallery-home .krg-grid .krg-project { flex: 0 0 84%; scroll-snap-align: center; transform: scale(.92) rotateY(6deg); transform-origin: center center; transition: transform .35s ease, box-shadow .35s ease; }
  .krg-gallery-home .krg-grid .krg-project.krg-is-prev { transform: scale(.92) rotateY(-6deg); }
  .krg-gallery-home .krg-grid .krg-project.krg-is-current { transform: scale(1) rotateY(0); box-shadow: 0 18px 40px rgba(17, 0, 35, .27); }
  .krg-carousel-controls:not([hidden]) { display: flex; align-items: center; justify-content: center; gap: .65rem; margin: .35rem auto .7rem; }
  .krg-carousel-controls > button { display: inline-grid; flex: none; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; background: transparent; color: #fff; font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; }
  .krg-carousel-controls .krg-carousel-toggle { margin-left: .25rem; font-size: .8rem; }
  .krg-carousel-dots { display: flex; align-items: center; gap: .05rem; }
  .krg-carousel-dots .krg-carousel-dot { display: grid; place-items: center; width: 1.35rem; height: 2rem; min-width: 1.35rem; min-height: 2rem; padding: 0; border: 0; background: transparent; cursor: pointer; }
  .krg-carousel-dots .krg-carousel-dot::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: rgba(255,255,255,.42); }
  .krg-carousel-dots .krg-carousel-dot[aria-current="true"]::before { width: 1.05rem; border-radius: 1rem; background: #fff; }
  .krg-carousel-controls button:focus-visible, .krg-filters button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
}
@media(max-width: 370px) { .krg-gallery-home .krg-grid .krg-project { flex-basis: 88%; } .krg-gallery-home .krg-grid { padding-left: 6%; padding-right: 6%; } }
@media(prefers-reduced-motion: reduce) { .krg-divider { transition: none; } }
@media(prefers-reduced-motion: reduce) { .krg-gallery-home .krg-grid .krg-project { transition: none; } .krg-gallery-home .krg-grid { scroll-behavior: auto; } }