:root {
  --concept-bg: #050708;
  --concept-panel: #0c1113;
  --concept-ink: #f4f7f6;
  --concept-muted: #9aa7a7;
  --concept-line: rgba(255,255,255,.13);
  --concept-signal: #75f6ce;
}

.proof-collection-page {
  background:
    radial-gradient(circle at 70% 4%, rgba(84,241,197,.13), transparent 28rem),
    linear-gradient(180deg, #071012 0, var(--concept-bg) 38rem);
  color: var(--concept-ink);
}

.proof-collection-page main,
.concept-showcase { overflow: clip; }

.concept-showcase {
  position: relative;
  padding: clamp(4.5rem,8vw,8rem) 0 clamp(4.8rem,8vw,7.5rem);
  background:
    linear-gradient(180deg, rgba(5,7,8,.1), rgba(5,7,8,.9) 82%),
    repeating-linear-gradient(90deg, transparent 0 86px, rgba(255,255,255,.025) 87px 88px);
}

.work-overview-page .concept-showcase {
  border-block: 1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(circle at 17% 16%, rgba(105,255,209,.12), transparent 31rem),
    linear-gradient(145deg, #06090a, #0b1214 55%, #050708);
}

.concept-showcase__head,
.concept-browser,
.concept-collection-hero__inner,
.concept-editorial,
.concept-footer-cta {
  width: min(calc(100% - clamp(2rem,6vw,7rem)), 1500px);
  margin-inline: auto;
}

.concept-showcase__head {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(280px,.55fr);
  align-items: end;
  gap: clamp(2rem,5vw,5rem);
  margin-bottom: 2rem;
}

.concept-showcase__head .eyebrow,
.concept-collection-hero .eyebrow,
.concept-editorial .eyebrow { color: var(--concept-signal); }

.concept-showcase__head h2,
.concept-collection-hero h1,
.concept-editorial h2,
.concept-footer-cta h2 {
  margin: .45rem 0 0;
  max-width: 12ch;
  color: var(--concept-ink);
  letter-spacing: -.055em;
}

.concept-showcase__head h2 { font-size: clamp(2.8rem,6vw,6.4rem); }
.concept-showcase__head > p { margin: 0; max-width: 34rem; color: #b9c3c2; font-size: 1.03rem; }

.concept-showcase__actions {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-top: 1.4rem;
}

.concept-showcase__actions a {
  color: var(--concept-ink);
  font-weight: 760;
  text-decoration: none;
}

.concept-rail-wrap { position: relative; }

.concept-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(250px, 18vw, 330px);
  gap: clamp(.8rem,1.3vw,1.35rem);
  margin: 0;
  padding: 1.5rem max(clamp(4.25rem,5vw,5.25rem), calc((100vw - 1500px)/2)) 3rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scroll-padding-inline: max(clamp(4.25rem,5vw,5.25rem), calc((100vw - 1500px)/2));
  scrollbar-color: rgba(117,246,206,.7) rgba(255,255,255,.06);
  scrollbar-width: thin;
}

.concept-card {
  --card-accent: var(--concept-signal);
  position: relative;
  min-height: clamp(360px,34vw,510px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 5px;
  background: #101617;
  color: #fff;
  text-decoration: none;
  scroll-snap-align: start;
  box-shadow: 0 20px 45px rgba(0,0,0,.38);
  isolation: isolate;
  transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}

.concept-card::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2,4,5,.02) 18%, rgba(2,4,5,.18) 45%, rgba(2,4,5,.97) 100%),
    linear-gradient(90deg, rgba(2,4,5,.35), transparent 64%);
}

.concept-card::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--card-accent);
  box-shadow: 0 -10px 36px color-mix(in srgb, var(--card-accent) 60%, transparent);
  transform: scaleX(.22);
  transform-origin: left;
  transition: transform 240ms ease;
}

.concept-card:hover,
.concept-card:focus-visible {
  z-index: 4;
  border-color: color-mix(in srgb, var(--card-accent) 72%, white);
  box-shadow: 0 28px 64px rgba(0,0,0,.58), 0 0 0 1px color-mix(in srgb, var(--card-accent) 42%, transparent);
  transform: translateY(-10px) scale(1.025);
}

.concept-card:hover::after,
.concept-card:focus-visible::after { transform: scaleX(1); }

.concept-card__media {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.06);
  transition: transform 650ms cubic-bezier(.2,.75,.2,1), filter 250ms ease;
}

.concept-card:hover .concept-card__media,
.concept-card:focus-visible .concept-card__media { transform: scale(1.06); filter: saturate(1.08) contrast(1.05); }

.concept-card__top,
.concept-card__body { position: absolute; z-index: 4; left: clamp(1.1rem,2vw,1.65rem); right: clamp(1.1rem,2vw,1.65rem); }

.concept-card__top {
  top: 1.2rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.concept-card__index,
.concept-card__type {
  font: 760 .65rem/1 system-ui,sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.concept-card__index { color: var(--card-accent); }
.concept-card__type { padding: .46rem .62rem; border: 1px solid rgba(255,255,255,.26); background: rgba(4,7,8,.64); backdrop-filter: blur(10px); }

.concept-card__body { bottom: 1.45rem; }
.concept-card__body h3 { margin: 0 0 .55rem; font-size: clamp(2rem,3.2vw,3.55rem); letter-spacing: -.055em; }
.concept-card__body p { margin: 0; max-width: 34rem; color: rgba(255,255,255,.78); line-height: 1.5; }

.concept-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: 1rem;
}

.concept-card__tags span {
  padding: .42rem .58rem;
  border: 1px solid rgba(255,255,255,.19);
  background: rgba(4,7,8,.62);
  color: rgba(255,255,255,.88);
  font: 700 .62rem/1 system-ui,sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.concept-rail-nav {
  position: absolute;
  z-index: 7;
  top: 50%;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 6rem;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(4,7,8,.82);
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  backdrop-filter: blur(14px);
  transform: translateY(-62%);
}
.concept-rail-nav:hover,.concept-rail-nav:focus-visible { background: #fff; color: #050708; }
.concept-rail-nav--prev { left: .5rem; }
.concept-rail-nav--next { right: .5rem; }

.concept-collection-hero {
  min-height: 72svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding: 10rem 0 clamp(5rem,8vw,8rem);
  position: relative;
  background:
    radial-gradient(circle at 78% 35%, rgba(85,225,186,.16), transparent 24%),
    radial-gradient(circle at 66% 68%, rgba(68,222,248,.11), transparent 30%),
    linear-gradient(120deg, #050a0b 0 47%, #0a1718 100%);
}

.concept-collection-hero::before {
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 72px 72px;
  content: "";
  inset: 0;
  opacity: .55;
  pointer-events: none;
  position: absolute;
}

.concept-collection-hero::after {
  border: 1px solid rgba(85,225,186,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 90px rgba(85,225,186,.025), 0 0 0 180px rgba(68,222,248,.018);
  content: "";
  height: min(32vw, 470px);
  position: absolute;
  right: 8vw;
  top: 50%;
  transform: translateY(-50%);
  width: min(32vw, 470px);
}

.concept-collection-hero__inner { align-items: center; display: grid; gap: clamp(3rem,7vw,7rem); grid-template-columns: minmax(0,1fr) minmax(270px,.45fr); position: relative; z-index: 1; }
.concept-collection-hero h1 { font-size: clamp(4.5rem,10vw,9rem); letter-spacing: -.055em; line-height: .84; max-width: 7ch; }
.concept-collection-hero .hero-copy { color: #d5dcda; font-size: clamp(1.08rem,1.55vw,1.35rem); margin-top: 2rem; max-width: 42rem; }
.concept-collection-hero__proof { display: grid; gap: 1px; background: var(--concept-line); border: 1px solid var(--concept-line); }
.concept-collection-hero__proof article { padding: 1.4rem; background: rgba(4,7,8,.86); backdrop-filter: blur(12px); }
.concept-collection-hero__proof strong { display: block; color: var(--concept-signal); font-size: 1.65rem; }
.concept-collection-hero__proof span { color: var(--concept-muted); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }

.concept-browser { padding: clamp(5rem,9vw,9rem) 0; }
.concept-browser__toolbar { display: grid; grid-template-columns: minmax(260px,.75fr) 1fr; gap: 1rem; align-items: start; margin: 2rem 0 2.5rem; }
.concept-search { position: relative; }
.concept-search label { display: block; margin-bottom: .55rem; color: var(--concept-muted); font-size: .72rem; letter-spacing: .11em; text-transform: uppercase; }
.concept-search input { width: 100%; min-height: 3.4rem; padding: 0 1rem; border: 1px solid var(--concept-line); background: #0d1315; color: #fff; font: inherit; }
.concept-search input:focus { outline: 2px solid var(--concept-signal); outline-offset: 2px; }
.concept-filters { display: flex; flex-wrap: wrap; gap: .55rem; padding-top: 1.27rem; }
.concept-filter { min-height: 3.4rem; padding: 0 1rem; border: 1px solid var(--concept-line); background: #0d1315; color: #dce3e1; cursor: pointer; }
.concept-filter:hover,.concept-filter:focus-visible,.concept-filter.is-active { border-color: var(--concept-signal); color: #06110e; background: var(--concept-signal); }
.concept-browser__meta { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-block: 1px solid var(--concept-line); color: var(--concept-muted); }
.concept-browser__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.2rem; padding: 1.4rem 0; }
.concept-browser__grid .concept-card { min-height: 440px; }
.concept-card[hidden] { display: none; }
.concept-empty { padding: 3rem; border: 1px solid var(--concept-line); color: var(--concept-muted); text-align: center; }

.concept-editorial { display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: 3rem; padding: clamp(4rem,8vw,8rem) 0; border-top: 1px solid var(--concept-line); }
.concept-editorial h2 { font-size: clamp(2.7rem,5vw,5.8rem); }
.concept-editorial__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--concept-line); border: 1px solid var(--concept-line); }
.concept-editorial__grid article { padding: clamp(1.2rem,2vw,2rem); background: var(--concept-panel); }
.concept-editorial__grid span { color: var(--concept-signal); font: 760 .68rem/1 system-ui,sans-serif; letter-spacing: .12em; }
.concept-editorial__grid h3 { margin: 2.5rem 0 .7rem; font-size: 1.22rem; }
.concept-editorial__grid p { margin: 0; color: var(--concept-muted); }

.concept-footer-cta { padding: 3rem 0 7rem; }
.concept-footer-cta__panel { display: flex; justify-content: space-between; align-items: end; gap: 2rem; padding: clamp(2rem,5vw,5rem); border: 1px solid var(--concept-line); background: linear-gradient(125deg,#10191a,#08100f); }

@media (max-width: 1050px) {
  .concept-browser__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .concept-collection-hero__inner,.concept-editorial { grid-template-columns: 1fr; }
  .concept-collection-hero__proof { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 760px) {
  .concept-showcase__head { grid-template-columns: 1fr; }
  .concept-rail { grid-auto-columns: min(82vw,360px); padding-inline: 1rem; scroll-padding-inline: 1rem; }
  .concept-rail-nav { display: none; }
  .concept-card { min-height: 410px; }
  .concept-collection-hero { min-height: auto; padding-top: 8rem; }
  .concept-collection-hero__inner { gap: 2rem; }
  .concept-collection-hero__proof { grid-template-columns: 1fr; }
  .concept-browser__toolbar { grid-template-columns: 1fr; }
  .concept-filters { padding-top: 0; overflow-x: auto; flex-wrap: nowrap; }
  .concept-filter { flex: 0 0 auto; }
  .concept-browser__grid { grid-template-columns: 1fr; }
  .concept-browser__grid .concept-card { min-height: 420px; }
  .concept-editorial__grid { grid-template-columns: 1fr; }
  .concept-footer-cta__panel { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .concept-card,.concept-card::after,.concept-card__media { transition: none; }
  .concept-card:hover,.concept-card:focus-visible { transform: none; }
}