:root {
  --lab-shell: #06090a;
  --lab-panel: #0b1113;
  --lab-line: rgba(255,255,255,.14);
  --lab-signal: #75f6ce;
}

.concept-route-split {
  width: min(calc(100% - clamp(2rem,6vw,7rem)), 1500px);
  margin: clamp(3rem,6vw,6rem) auto 0;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: clamp(1rem,2vw,1.6rem);
}

.concept-route-card {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  padding: clamp(1.5rem,3vw,2.6rem);
  border: 1px solid var(--lab-line);
  background: linear-gradient(145deg,rgba(14,22,24,.96),rgba(5,8,9,.98));
  color: #f5f7f6;
  text-decoration: none;
  isolation: isolate;
}

.concept-route-card::before {
  content: "";
  position: absolute;
  inset: auto -12% -38% 34%;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  background: radial-gradient(circle,rgba(117,246,206,.16),transparent 64%);
  z-index: -1;
}

.concept-route-card--work::before {
  border-radius: 0;
  background: repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 1px,transparent 1px 15px);
  transform: rotate(10deg);
}

.concept-route-card small,
.concept-route-card span {
  display: block;
  font: 780 .68rem/1.2 system-ui,sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.concept-route-card small { color: var(--lab-signal); }
.concept-route-card h2 { max-width: 12ch; margin: 2.5rem 0 .8rem; font-size: clamp(2rem,4vw,4rem); letter-spacing: -.055em; }
.concept-route-card p { max-width: 34rem; margin: 0; color: rgba(255,255,255,.72); line-height: 1.55; }
.concept-route-card span { margin-top: 1.8rem; color: #fff; }
.concept-route-card:hover,.concept-route-card:focus-visible { border-color: var(--lab-signal); outline: 0; box-shadow: 0 24px 60px rgba(0,0,0,.38),0 0 0 1px rgba(117,246,206,.24); }

.concept-browser__grid { gap: clamp(1.2rem,2vw,2rem); padding-block: 2rem; }

.concept-card {
  min-height: 560px;
  border-radius: 8px;
}

.concept-card__visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  color: inherit;
}

.concept-card__visual:focus-visible { outline: 2px solid var(--card-accent); outline-offset: -4px; }
.concept-card:hover,.concept-card:focus-within { 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(-8px); }
.concept-card:hover::after,.concept-card:focus-within::after { transform: scaleX(1); }
.concept-card:hover .concept-card__media,.concept-card:focus-within .concept-card__media { transform: scale(1.045); filter: saturate(1.08) contrast(1.05); }

.concept-card__body { bottom: 1.25rem; }
.concept-card__body h3 { margin: .7rem 0 .35rem; font-size: clamp(2.25rem,3.4vw,3.7rem); line-height: .92; }
.concept-card__challenge { margin: 0; color: #fff; font-weight: 760; line-height: 1.35; }

.concept-card__technology {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .85rem;
}

.concept-card__technology span {
  padding: .35rem .48rem;
  border-left: 2px solid var(--card-accent);
  background: rgba(4,7,8,.72);
  color: rgba(255,255,255,.76);
  font: 680 .59rem/1.15 system-ui,sans-serif;
  letter-spacing: .04em;
}

.concept-card__actions {
  display: flex;
  align-items: stretch;
  gap: .55rem;
  margin-top: 1rem;
}

.concept-card__actions a {
  position: relative;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .72rem .88rem;
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  font: 780 .72rem/1 system-ui,sans-serif;
  text-decoration: none;
}

.concept-card__launch { flex: 1 1 auto; border-color: color-mix(in srgb,var(--card-accent) 72%,white) !important; background: var(--card-accent); color: #04100d !important; }
.concept-card__story { flex: 0 0 auto; background: rgba(3,6,7,.72); }
.concept-card__actions a:hover,.concept-card__actions a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.concept-card[data-concept-id="hoijob"] .concept-card__media { object-position: center top; }
.concept-card[data-concept-id="meridien-hospitality-forecasting"] .concept-card__media { object-position: center 68%; }
.concept-card[data-concept-id="kompas-administratie"] .concept-card__media { filter: saturate(.82) contrast(1.08) brightness(.78); }
.concept-card[data-concept-id="resonance-spatial-ai"]::before { background: linear-gradient(180deg,rgba(2,4,5,.02) 8%,rgba(13,1,19,.26) 42%,rgba(9,1,13,.98) 100%); }
.concept-card[data-concept-id="aurelia-67-digital-twin"]::before { background: linear-gradient(180deg,rgba(2,4,5,.02) 12%,rgba(2,4,5,.16) 40%,rgba(3,10,11,.98) 100%); }

.concept-editorial__grid article { position: relative; overflow: hidden; min-height: 250px; }
.concept-editorial__grid article::after { content: ""; position: absolute; inset: auto -2rem -4rem auto; width: 9rem; aspect-ratio: 1; border: 1px solid rgba(117,246,206,.18); border-radius: 50%; }
.concept-editorial__grid article:nth-child(2) { background: linear-gradient(145deg,#101a1c,#091012); }
.concept-editorial__grid article:nth-child(2)::after { border-radius: 0; transform: rotate(25deg); }
.concept-editorial__grid article:nth-child(3) { background: linear-gradient(145deg,#131311,#0b0e0e); }
.concept-editorial__grid article:nth-child(3)::after { width: 12rem; border-color: rgba(242,184,75,.22); }

@media (min-width:761px) and (max-width:1000px) {
  .site-header .brand-copy small { display: none; }
  .site-header .nav-links { gap: 6px; }
  .site-header .nav-links a { padding-inline: 8px; font-size: .76rem; }
}

@media (max-width:760px) {
  .concept-route-split { grid-template-columns: 1fr; }
  .concept-route-card { min-height: 230px; }
  .concept-card,.concept-browser__grid .concept-card { min-height: 530px; }
  .concept-card__actions { flex-direction: column; }
  .concept-card__story { flex-basis: auto; }
  .concept-card:hover,.concept-card:focus-within { transform: none; }
}

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