
.map-band{
  width:min(1440px, calc(100% - 88px));
  margin:0 auto 90px;
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  min-height:560px;
  background:#fff;
  border:1px solid var(--rule-light);
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 34px 90px -62px rgba(12,26,22,.42);
}
.map-band .info{
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,249,247,.96)),
    radial-gradient(circle at 20% 20%, rgba(126,208,168,.14), transparent 42%);
  padding:58px 48px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-right:1px solid var(--rule-light);
}
.map-band .info h2{font-family:"Montserrat",sans-serif;font-size:clamp(30px,3vw,48px);line-height:.96;color:var(--green-900);letter-spacing:-0.025em}
.map-band .info h2 em{font-style:italic;color:var(--green-700)}
.addr{font-family:"Montserrat",sans-serif;font-size:24px;color:var(--green-900);line-height:1.32;margin-top:28px}
.map-info-link{
  display:inline-flex;align-items:center;gap:12px;align-self:flex-start;
  margin-top:42px;padding:13px 18px 13px 22px;border-radius:999px;
  background:var(--green-900);color:#fff;
  font-family:"Montserrat",sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  transition:transform .25s, background .25s, box-shadow .25s;
}
.map-info-link span{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.14)}
.map-info-link:hover{background:var(--green-800);transform:translateY(-2px);box-shadow:0 18px 30px -24px rgba(11,61,48,.5)}
.hours{margin-top:50px;border-top:1px solid var(--rule);padding-top:24px}
.hours div{display:flex;justify-content:space-between;padding:8px 0;font-size:14px;color:var(--ink);border-bottom:1px dashed var(--rule)}
.hours div:last-child{border-bottom:none}
.map-band .map{
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 47% 53%, rgba(200,131,91,.19), transparent 18%),
    radial-gradient(circle at 60% 42%, rgba(126,208,168,.1), transparent 34%),
    linear-gradient(145deg, #0f4f3f 0%, #082e25 62%, #06241d 100%);
}
.map-grid-bg{
  position:absolute;inset:0;
  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:64px 64px;
  pointer-events:none;z-index:1;
  opacity:.45;
  mask-image:radial-gradient(ellipse at center, #000 25%, transparent 82%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 25%, transparent 82%);
}
.map-band .map::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:
    linear-gradient(90deg, rgba(6,36,29,.18), transparent 24%, transparent 72%, rgba(6,36,29,.2)),
    linear-gradient(180deg, rgba(6,36,29,.34), transparent 22%, transparent 76%, rgba(6,36,29,.36));
}
#leafletMap{position:absolute;inset:0;background:transparent;z-index:2}
.leaflet-container{background:transparent !important;font-family:"Montserrat",sans-serif !important;outline:none;cursor:grab}
.leaflet-container:active{cursor:grabbing}
.leaflet-control-attribution{display:none !important}
.leaflet-control-zoom{border:none !important;box-shadow:none !important;margin:22px !important;z-index:600 !important}
.leaflet-control-zoom a{
  background:rgba(255,255,255,.1) !important;color:#fff !important;
  border:1px solid rgba(255,255,255,.18) !important;
  backdrop-filter:blur(12px);
  width:34px !important;height:34px !important;line-height:32px !important;
  font-size:16px !important;font-weight:400 !important;
  transition:all .25s}
.leaflet-control-zoom a:first-child{border-radius:12px 12px 0 0 !important;border-bottom:none !important}
.leaflet-control-zoom a:last-child{border-radius:0 0 12px 12px !important}
.leaflet-control-zoom a:hover{background:var(--accent) !important;border-color:var(--accent) !important;color:#fff !important}

.leaflet-overlay-pane svg .neutral-country{
  fill:rgba(255,255,255,.018);
  stroke:rgba(255,255,255,.17);
  stroke-width:.65;
  transition:fill .4s}
.leaflet-overlay-pane svg .zone-highlight{
  fill:url(#zoneGradient);
  stroke:rgba(255,255,255,.92);
  stroke-width:1.25;
  stroke-opacity:.9;
}
.leaflet-overlay-pane svg .distance-ring{
  fill:none;stroke:rgba(255,255,255,.18);
  stroke-width:.7;stroke-dasharray:2 7;
  pointer-events:none}
.leaflet-overlay-pane svg .distance-ring.inner{stroke:rgba(200,131,91,.42);stroke-dasharray:3 5}

.oyonnax-pin{position:relative;width:0;height:0}
.oyonnax-pin .ring{
  position:absolute;left:0;top:0;width:18px;height:18px;
  border:1.5px solid var(--accent);border-radius:50%;
  transform:translate(-50%,-50%);opacity:0;
  animation:pinPulse 3s cubic-bezier(.2,.7,.3,1) infinite;
  pointer-events:none}
.oyonnax-pin .ring.r2{animation-delay:.9s;border-color:#fff}
.oyonnax-pin .ring.r3{animation-delay:1.8s;border-color:rgba(255,255,255,.48)}
.oyonnax-pin .core{
  position:absolute;left:0;top:0;width:18px;height:18px;
  background:#fff;border:3px solid var(--accent);border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 8px 20px rgba(0,0,0,.38),0 0 0 8px rgba(200,131,91,.16)}
.oyonnax-pin .core::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent)}
@keyframes pinPulse{
  0%{transform:translate(-50%,-50%) scale(.4);opacity:.75}
  70%{opacity:0}
  100%{transform:translate(-50%,-50%) scale(4.2);opacity:0}
}

.city-pin{position:relative;width:0;height:0;pointer-events:none}
.city-pin .city-dot{
  position:absolute;left:0;top:0;width:6px;height:6px;
  background:rgba(255,255,255,.88);border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 1.5px rgba(11,61,48,.8)}
.city-pin .city-name{
  position:absolute;left:10px;top:-3px;
  font-family:"Montserrat",sans-serif;font-size:10px;
  letter-spacing:.04em;color:rgba(255,255,255,.74);white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 8px rgba(0,0,0,.35)}

.map-hud-item{
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 22px 48px -28px rgba(0,0,0,.45);
  border-radius:22px;
  color:var(--green-900);
}
.map-zone-card{
  position:absolute;right:26px;top:26px;z-index:500;
  padding:18px 22px;min-width:240px;
}
.map-zone-card span,
.map-place-card span{
  display:block;margin-bottom:8px;
  font-family:"Montserrat",sans-serif;font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
}
.map-zone-card strong{display:block;font-size:20px;line-height:1.2;font-weight:700;letter-spacing:-.02em}
.map-place-card{
  position:absolute;left:26px;bottom:26px;z-index:500;
  padding:20px 24px;min-width:250px;
}
.map-place-card strong{display:block;font-family:"Montserrat",sans-serif;font-size:30px;line-height:1;font-style:italic;letter-spacing:-.03em}
.map-place-card small{display:block;margin-top:12px;padding-top:12px;border-top:1px solid rgba(12,26,22,.12);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-60)}

.form-band{padding:140px 44px;background:var(--ivory)}
.form-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:80px;align-items:start}
.fg-left h2{font-family:"Montserrat",sans-serif;font-size:clamp(30px,3vw,46px);line-height:.95;color:var(--green-900);letter-spacing:-0.02em}
.fg-left h2 em{font-style:italic}
.fg-left p{color:var(--ink-60);line-height:1.6;margin-top:26px;max-width:380px}

.simple-form{
  background:#fff;
  border-radius:24px;
  padding:48px;
  box-shadow:0 10px 40px -10px rgba(0,0,0,0.04);
  border:1px solid var(--rule-light);
}
.simple-form .row-2{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.simple-form .field{margin-bottom:28px}
.simple-form label{display:block;font-family:"Montserrat",sans-serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60);margin-bottom:10px}
.simple-form input,.simple-form textarea{width:100%;padding:14px 0;border:none;border-bottom:1px solid var(--rule);background:transparent;font-family:"Montserrat",sans-serif;font-size:18px;color:var(--ink);outline:none;transition:border-color .3s}
.simple-form input:focus,.simple-form textarea:focus{border-bottom-color:var(--green-800)}
.simple-form textarea{resize:vertical;min-height:140px}

@media (max-width:900px){
  .map-band{width:calc(100% - 40px);grid-template-columns:1fr;min-height:auto;margin-bottom:60px;border-radius:22px}
  .map-band .info{padding:42px 28px;border-right:none;border-bottom:1px solid var(--rule-light)}
  .map-band .map{min-height:500px}
  .addr{font-size:22px}
  .map-info-link{margin-top:30px}
  .map-zone-card{right:16px;top:16px;min-width:0;max-width:220px;padding:14px 16px;border-radius:16px}
  .map-zone-card strong{font-size:16px}
  .map-place-card{left:16px;bottom:16px;min-width:210px;padding:16px 18px;border-radius:16px}
  .map-place-card strong{font-size:24px}
  .leaflet-control-zoom{margin:16px !important}
  .leaflet-top.leaflet-left{top:auto;bottom:108px}
  .leaflet-control-zoom a{width:28px !important;height:28px !important;line-height:26px !important;font-size:14px !important}
  .city-pin .city-name{font-size:9px;left:8px}
  .city-pin .city-dot{width:5px;height:5px}
  .leaflet-overlay-pane svg .neutral-country{stroke-width:.5}
  .leaflet-overlay-pane svg .zone-highlight{stroke-width:1}
  .form-band{padding:70px 20px}
  .form-grid{grid-template-columns:1fr;gap:30px}
  .simple-form .row-2{grid-template-columns:1fr;gap:0}
}

@media (max-width:520px){
  .map-band{width:calc(100% - 28px);border-radius:18px}
  .map-band .info{padding:34px 22px}
  .map-band .map{min-height:440px}
  .map-zone-card{left:14px;right:14px;top:14px;max-width:none;text-align:center}
  .map-place-card{left:14px;right:14px;bottom:14px;min-width:0}
  .city-pin .city-name{display:none}
  .leaflet-top.leaflet-left{display:none}
}
