@view-transition { navigation: auto; }
.header { view-transition-name: rybka-header; }
.project-door {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; isolation: isolate; overflow: hidden; width: min(100vw - 2.5rem, var(--content-default));
  min-height: clamp(156px, 19vw, 225px); margin: 1.25rem 0 0 50%; translate: -50% 0; padding: 1.6rem 1.8rem;
  border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
  border-radius: 1.25rem; text-align: left; color: var(--color-text);
  background: var(--color-surface); view-transition-name: nearby-window;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .6s cubic-bezier(.2,.65,.3,1);
  touch-action: pan-y pinch-zoom; -webkit-tap-highlight-color: transparent;
  contain: layout paint;
  --door-map-ground:#202620; --door-map-park:#34482a; --door-map-road-edge:#39423a;
  --door-map-road:#070a08; --door-map-building:#343d35; --door-map-outline:#657060;
}
.project-door::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: linear-gradient(90deg,var(--color-bg) 3%,color-mix(in srgb,var(--color-bg) 80%,transparent) 35%,color-mix(in srgb,var(--color-bg) 6%,transparent));
  transition: background .3s ease, opacity .3s ease;
}
@supports not (translate: -50% 0) {
  .project-door { width: 100%; margin-left: 0; }
}
.project-door-map { position:absolute; z-index:-2; inset:0; width:100%; height:100%; display:block; overflow:hidden; opacity:.95; }
.door-map-ground { fill:var(--door-map-ground); }
.door-map-parks { fill:var(--door-map-park); }
.door-map-road-edges { fill:var(--door-map-road-edge); }
.door-map-roads { fill:var(--door-map-road); }
.door-map-buildings { fill:var(--door-map-building); stroke:var(--door-map-outline); stroke-width:.45; stroke-linejoin:round; }
[data-theme="light"] .project-door { --door-map-ground:#eff1ed; --door-map-park:#d9e2c7; --door-map-road-edge:#d1d9ce; --door-map-road:#fff; --door-map-building:#e1e5df; --door-map-outline:#b8c2b6; }
.project-door-copy { display: grid; gap: .35rem; }
.project-door-kicker { font-size: .61rem; letter-spacing: .17em; color: var(--color-text-muted); text-transform: uppercase; }
.project-door-title { font-size: clamp(1.6rem,4vw,2.1rem); font-weight: 700; letter-spacing: -.055em; line-height: 1.15; }
.project-door-detail { font-size: .76rem; color: var(--color-text-muted); }
.project-door-heart { display: grid; place-items: center; width: 45px; height: 45px; flex: 0 0 auto; border: 1px solid color-mix(in srgb,var(--color-text) 20%,transparent); border-radius: 50%; background: color-mix(in srgb,var(--color-surface) 60%,transparent); color:var(--color-text); backdrop-filter: blur(14px); transition:transform .5s ease; }
.project-door-heart-line { width:22px; height:22px; }
@media(hover:hover) and (pointer:fine) {
  .project-door.is-hovered { border-color: color-mix(in srgb,var(--color-text) 26%,transparent); background: #ffffff12; transform: translateY(-1px); box-shadow: inset 0 1px 0 #ffffff30,0 0 30px #ffffff0c,0 12px 34px #00000018; }
  .project-door.is-hovered::after { opacity: .88; }
  .project-door.is-hovered .project-door-heart { transform: scale(1.04); }
}
.project-door:focus-visible { outline: 2px solid color-mix(in srgb,var(--color-text) 70%,transparent); outline-offset: 5px; }
.project-door:focus:not(:focus-visible) { outline: none; }
.project-door:active,.project-door.is-pressed { background: #ffffff18; border-color: color-mix(in srgb,var(--color-text) 28%,transparent); box-shadow: inset 0 1px 0 #ffffff40,0 0 28px #ffffff10; }
.project-door:active::after,.project-door.is-pressed::after { opacity: .58; }
.project-door:active .project-door-heart,.project-door.is-pressed .project-door-heart { transform:scale(1.04); }
[data-theme="light"] .project-door.is-hovered,[data-theme="light"] .project-door:active,[data-theme="light"] .project-door.is-pressed { background: #fff; box-shadow: inset 0 1px 0 #fff,0 6px 30px #25372b0d; }
#connect { padding-bottom: clamp(2rem,4vw,4rem); }
#map { padding-top: clamp(3rem,6vw,6rem); }
.project-door + .secure-connect { margin-top: 1.25rem; }
::view-transition-group(nearby-window) { animation-duration: 680ms; animation-timing-function: cubic-bezier(.22,.76,.22,1); overflow: clip; border-radius: 1.25rem; }
::view-transition-old(nearby-window),::view-transition-new(nearby-window) { height: 100%; object-fit: cover; mix-blend-mode: normal; }
::view-transition-group(rybka-header) { animation-duration: 500ms; }
::view-transition-old(root) { animation-duration: 280ms; }
::view-transition-new(root) { animation-duration: 420ms; }
@media(max-width:480px) { .project-door { min-height: 145px; padding: 1.3rem; gap: .8rem; } .project-door-detail { max-width: 22ch; } }
@media(prefers-reduced-motion:reduce) { .project-door,.project-door-heart { transition: none; } ::view-transition-group(*) { animation-duration: .01ms!important; } }
/* The project is the first doorway in Connect, above its Transmission heading. */
#connect > .container > .project-door { margin-top:0; margin-bottom:clamp(2.5rem,5vw,4rem); }

/* Nearby remains part of the homepage flow between Vision and Mission Map. */
.nearby-section { padding-block: clamp(2rem, 5vw, 4.5rem); }
.nearby-section .project-door { width: 100%; margin: 0; translate: none; }

/* Nearby is the first full-width section after the globe, before Transmission. */
#top > .hero + .nearby-section { padding-top: clamp(2.25rem, 5vw, 4.5rem); padding-bottom: clamp(2rem, 4vw, 3.5rem); }
#top > .hero + .nearby-section .project-door { margin-top: 0; }