.pickup-concept{padding:76px clamp(18px,6vw,92px);background:#f6f1e8;border-top:1px solid #e7dece}.pickup-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.7fr);gap:48px;align-items:end;max-width:1380px;margin:0 auto 36px}.pickup-intro h2,.research-callout h2{font-size:clamp(2rem,4vw,3.6rem);line-height:1;letter-spacing:-.055em;margin:8px 0 0}.pickup-intro p{color:#5f6878;line-height:1.65;margin:0}.pickup-steps{list-style:none;padding:0;margin:0 auto;max-width:1380px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;counter-reset:steps}.pickup-steps li{background:#fff;border:1px solid #e3dacb;border-radius:18px;padding:20px;min-height:210px;display:flex;flex-direction:column;gap:27px}.pickup-steps li>span{width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:.78rem;font-weight:900}.pickup-steps b{display:block;font-size:1rem;line-height:1.25}.pickup-steps p{margin:9px 0 0;color:#697386;font-size:.82rem;line-height:1.55}.pickup-rules{max-width:1380px;margin:14px auto 0;background:var(--ink);color:#fff;border-radius:20px;padding:28px 30px;display:grid;grid-template-columns:1fr 1fr;gap:44px}.pickup-rule-label{display:block;font-size:.68rem;letter-spacing:.14em;color:var(--yellow);font-weight:850;margin-bottom:10px}.pickup-rules strong{font-size:clamp(1.1rem,2vw,1.5rem);line-height:1.35;display:block}.pickup-rules ul{margin:0;padding-left:20px;color:#c8d1df;font-size:.82rem;line-height:1.65}.pickup-rules li+li{margin-top:6px}.pickup-pilot{max-width:1380px;margin:14px auto 0;border:1px solid #d9cdbb;background:#fffaf1;border-radius:16px;padding:19px 22px;display:grid;grid-template-columns:minmax(220px,.42fr) 1fr;gap:28px}.pickup-pilot span{font-weight:850;color:#8c3c2b}.pickup-pilot p{margin:0;color:#606a7b;line-height:1.55;font-size:.83rem}.research-callout{padding:64px clamp(18px,6vw,92px);background:#dcebe8;display:flex;align-items:end;justify-content:space-between;gap:46px}.research-callout>div{max-width:960px}.research-callout p{max-width:820px;line-height:1.6;color:#52666a;margin:17px 0 0}.research-callout a{background:var(--ink);color:#fff;text-decoration:none;border-radius:12px;padding:16px 20px;font-weight:850;white-space:nowrap}
@media(max-width:980px){.pickup-intro{grid-template-columns:1fr}.pickup-steps{grid-template-columns:repeat(2,1fr)}.pickup-rules{grid-template-columns:1fr}.research-callout{align-items:flex-start;flex-direction:column}.pickup-pilot{grid-template-columns:1fr}}
@media(max-width:560px){.pickup-concept{padding:52px 15px}.pickup-steps{grid-template-columns:1fr}.pickup-steps li{min-height:0}.pickup-rules{padding:24px 20px}.research-callout{padding:48px 18px}.research-callout a{width:100%;text-align:center}}
.pickup-pilot a{color:#9b3e2b;font-weight:850}

/* Фотографическая шапка: поле остаётся видимым, а рабочие элементы лежат на
   полупрозрачных поверхностях и плавно переходят в белую область результатов. */
.route-builder{
  position:relative;
  isolation:isolate;
  min-height:610px;
  padding:52px clamp(18px,4vw,64px) 96px;
  overflow:hidden;
  border-bottom:0;
  background-color:#d8e8ed;
  background-image:url("assets/poedu-road-village-hero.jpg");
  background-size:cover;
  background-position:center 58%;
}
.route-builder::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(90deg,rgba(244,249,252,.5) 0%,rgba(244,249,252,.2) 48%,rgba(244,249,252,.04) 78%),
    linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.04) 58%,rgba(255,255,255,.46) 100%);
}
.route-builder::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:-2%;
  right:-2%;
  bottom:-1px;
  height:96px;
  background:#fff;
  clip-path:polygon(0 73%,8% 62%,17% 76%,27% 60%,38% 72%,49% 55%,61% 73%,72% 59%,83% 75%,92% 63%,100% 72%,100% 100%,0 100%);
}
.route-builder-inner{
  position:relative;
  z-index:1;
  max-width:1900px;
  margin:0 auto;
}
.route-builder .route-heading{
  align-items:stretch;
  margin-bottom:18px;
}
.route-builder .route-heading>div,
.route-builder .route-heading>p{
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 18px 48px rgba(23,36,61,.16);
  backdrop-filter:blur(13px) saturate(1.08);
  -webkit-backdrop-filter:blur(13px) saturate(1.08);
}
.route-builder .route-heading>div{
  max-width:780px;
  padding:22px 26px 24px;
  border-radius:24px;
  background:rgba(255,255,255,.88);
}
.route-builder .route-heading h1{
  text-wrap:balance;
}
.route-builder .route-heading>p{
  align-self:flex-end;
  max-width:500px;
  padding:19px 21px;
  border-radius:18px;
  background:rgba(23,36,61,.82);
  color:#f8fbff;
}
.route-controls-card{
  position:relative;
  z-index:2;
  padding:20px 21px 19px;
  border:1px solid rgba(255,255,255,.82);
  border-radius:24px;
  background:rgba(255,255,255,.92);
  box-shadow:0 22px 60px rgba(23,36,61,.2);
  backdrop-filter:blur(16px) saturate(1.08);
  -webkit-backdrop-filter:blur(16px) saturate(1.08);
  transform:translateY(24px);
}
.route-controls-card .route-form input,
.route-controls-card .route-form select{
  background:rgba(255,255,255,.94);
}
.route-controls-card .detour button,
.route-controls-card .categories button{
  box-shadow:0 2px 8px rgba(23,36,61,.035);
}

@media(max-width:1050px){
  .route-builder{min-height:690px;background-position:center 55%}
  .route-builder .route-heading>div{max-width:620px}
  .route-builder .route-heading>p{max-width:390px}
}

@media(max-width:780px){
  .route-builder{
    min-height:0;
    padding:30px 15px 78px;
    background-position:47% center;
  }
  .route-builder::before{
    background:linear-gradient(180deg,rgba(244,249,252,.18),rgba(255,255,255,.46) 100%);
  }
  .route-builder::after{
    height:62px;
    clip-path:polygon(0 70%,16% 57%,31% 73%,48% 55%,66% 72%,83% 59%,100% 70%,100% 100%,0 100%);
  }
  .route-builder .route-heading{display:grid;gap:10px;margin-bottom:11px}
  .route-builder .route-heading>div,
  .route-builder .route-heading>p{max-width:none;width:100%}
  .route-builder .route-heading>div{padding:18px 18px 20px;border-radius:19px}
  .route-builder .route-heading>p{padding:14px 16px;border-radius:15px;font-size:.86rem}
  .route-controls-card{padding:14px 13px 13px;border-radius:19px;transform:translateY(14px)}
  .route-controls-card .route-options{margin-top:15px}
  .route-controls-card .categories{margin-top:14px}
}

@media(max-width:520px){
  .route-builder{background-position:41% center}
  .route-builder .route-heading h1{font-size:2.2rem}
  .route-controls-card{margin-inline:-1px}
}

/* Категории как предметный dock на стыке фотографии и результатов. */
.product-dock-wrap{
  position:relative;
  z-index:8;
  height:82px;
  margin-top:-42px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  pointer-events:none;
}
.product-dock{
  display:flex;
  align-items:flex-end;
  gap:5px;
  padding:8px 12px 9px;
  border:1px solid rgba(198,207,219,.9);
  border-radius:23px;
  background:rgba(255,255,255,.82);
  box-shadow:0 18px 44px rgba(23,36,61,.18),inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter:blur(18px) saturate(1.18);
  -webkit-backdrop-filter:blur(18px) saturate(1.18);
  pointer-events:auto;
}
.dock-item{
  position:relative;
  width:58px;
  height:58px;
  padding:0;
  border:0;
  border-radius:16px;
  background:transparent;
  display:grid;
  place-items:center;
  cursor:pointer;
  transform-origin:center bottom;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
}
.dock-icon{
  display:block;
  font-size:36px;
  line-height:1;
  filter:drop-shadow(0 5px 7px rgba(23,36,61,.16));
  transition:filter .18s ease;
}
.dock-label{
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  z-index:3;
  width:max-content;
  max-width:180px;
  padding:6px 9px;
  border-radius:8px;
  background:rgba(23,36,61,.93);
  color:#fff;
  font-size:.68rem;
  font-weight:750;
  line-height:1.2;
  white-space:nowrap;
  opacity:0;
  transform:translate(-50%,5px);
  pointer-events:none;
  transition:opacity .15s ease,transform .15s ease;
}
.dock-item:hover,
.dock-item:focus-visible{
  z-index:2;
  background:rgba(255,255,255,.78);
  box-shadow:0 8px 22px rgba(23,36,61,.13);
  transform:translateY(-11px) scale(1.3);
  outline:none;
}
.dock-item:hover .dock-icon,
.dock-item:focus-visible .dock-icon{filter:drop-shadow(0 10px 9px rgba(23,36,61,.22))}
.dock-item:hover .dock-label,
.dock-item:focus-visible .dock-label{opacity:1;transform:translate(-50%,0) scale(.77)}
.dock-item:has(+.dock-item:hover),
.dock-item:hover+.dock-item,
.dock-item:has(+.dock-item:focus-visible),
.dock-item:focus-visible+.dock-item{transform:translateY(-5px) scale(1.12)}
.dock-item.active{background:#fff1ed;box-shadow:inset 0 0 0 2px rgba(236,91,63,.25)}
.dock-item.active::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:2px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--red);
  transform:translateX(-50%);
}

@media(max-width:780px){
  .product-dock-wrap{height:74px;margin-top:-34px;justify-content:flex-start;overflow-x:auto;padding:0 12px;scrollbar-width:none}
  .product-dock-wrap::-webkit-scrollbar{display:none}
  .product-dock{margin:auto;gap:2px;padding:7px 8px 8px;border-radius:20px}
  .dock-item{width:48px;height:50px;border-radius:14px;flex:0 0 auto}
  .dock-icon{font-size:31px}
  .dock-label{display:none}
  .dock-item:hover,.dock-item:focus-visible{transform:translateY(-6px) scale(1.16)}
  .dock-item:has(+.dock-item:hover),.dock-item:hover+.dock-item,.dock-item:has(+.dock-item:focus-visible),.dock-item:focus-visible+.dock-item{transform:translateY(-2px) scale(1.06)}
}

@media(max-width:430px){
  .product-dock{margin-left:0}
}

@media(hover:none){
  .dock-item:hover{transform:none;box-shadow:none;background:transparent}
  .dock-item.active:hover{background:#fff1ed;box-shadow:inset 0 0 0 2px rgba(236,91,63,.25)}
}