/* =========================================================================
   Location section + custom map (home & contact)
   ========================================================================= */
.location__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2.2vw, 2.25rem); align-items: end; }
.location__head > div:first-child { grid-column: 1 / span 7; }
.location__title { margin-top: 1.4rem; font-size: clamp(3.4rem, 9.6vw, 10rem); }
.location__intro { grid-column: 9 / span 4; display: grid; gap: 1.2rem; }
.location__address { font-style: normal; font-family: var(--f-display); font-size: clamp(1.7rem, 2.4vw, 2.3rem); line-height: 1.1; color: var(--ink); }
@media (max-width: 900px) {
  .location__head > div:first-child, .location__intro { grid-column: 1 / -1; }
  .location__intro { margin-top: 2rem; }
}

/* Key drive-time numbers */
.loc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(3.5rem, 6vw, 5.5rem); border-top: 1px solid var(--line-strong); }
.loc-stats:empty { display: none; }
.loc-stat { padding: 1.6rem 1.4rem 0 0; display: grid; gap: .5rem; }
.loc-stat + .loc-stat { padding-left: 1.4rem; border-left: 1px solid var(--line); }
.loc-stat__num { font-family: var(--f-display); font-size: clamp(3rem, 5vw, 4.8rem); line-height: .9; color: var(--ink); display: flex; align-items: baseline; gap: .4rem; }
.loc-stat__num small { font-family: var(--f-sans); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--stone); font-weight: 600; }
.loc-stat__label { font-size: .9rem; color: var(--stone); line-height: 1.45; max-width: 16rem; }
@media (max-width: 800px) {
  .loc-stats { grid-template-columns: 1fr 1fr; }
  .loc-stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .loc-stat { padding-bottom: 1.4rem; }
}

/* Map module */
.locmap { display: grid; grid-template-columns: minmax(17rem, 24rem) 1fr; grid-template-rows: auto 1fr; gap: 0; margin-top: clamp(3rem, 5vw, 4.5rem); border: 1px solid var(--line-strong); background: var(--paper); }
.locmap__bar { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1rem; border-bottom: 1px solid var(--line); }
.locmap__panel { display: flex; flex-direction: column; border-right: 1px solid var(--line); min-height: 0; max-height: clamp(26rem, 60vh, 44rem); }
.locmap__filters { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); padding-right: 2rem; }
.locmap__filters::-webkit-scrollbar { display: none; }
.locmap__filters .chip { min-height: 2.3rem; padding: 0 .95rem; font-size: .64rem; letter-spacing: .14em; flex: none; }
.locmap__list { flex: 1; overflow-y: auto; padding: .4rem 0 1rem; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--sand-2) transparent; }
.locmap__group { padding: 1.1rem 1.2rem .4rem; }
.locmap__item button { width: 100%; display: grid; grid-template-columns: 1.7rem 1fr auto; align-items: center; gap: .7rem; padding: .62rem 1.2rem; text-align: left; font-size: .93rem; color: var(--ink); transition: background-color .35s var(--ease-out); position: relative; }
.locmap__item button::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--c); transform: scaleY(0); transition: transform .4s var(--ease-out); }
.locmap__item.is-hover button, .locmap__item button:hover { background: var(--linen); }
.locmap__item.is-active button { background: var(--linen); }
.locmap__item.is-active button::before { transform: scaleY(1); }
.locmap__num { width: 1.55rem; height: 1.55rem; border-radius: 50%; display: grid; place-items: center; font-size: .66rem; font-weight: 600; color: #fff; background: var(--c); }
.locmap__name { line-height: 1.3; }
.locmap__min { font-size: .78rem; color: var(--stone); white-space: nowrap; }
.locmap__min b { font-family: var(--f-display); font-size: 1.25rem; font-weight: 400; color: var(--ink); }
.locmap__note { font-size: .74rem; color: var(--stone); padding: .9rem 1.2rem 1.1rem; border-top: 1px solid var(--line); line-height: 1.5; }

.locmap__stage { position: relative; min-height: 0; display: flex; flex-direction: column; }
.locmap__scale { display: inline-flex; flex: none; }
.locmap__scale .chip { min-height: 2.3rem; }
.locmap__scale .chip + .chip { border-left: 0; }
.locmap__canvas { position: relative; flex: 1; min-height: clamp(26rem, 60vh, 44rem); overflow: hidden; background: #efe8dc; cursor: grab; touch-action: pan-y; user-select: none; }
.locmap__canvas.is-dragging { cursor: grabbing; }
.locmap__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.locmap__attrib { position: absolute; right: .6rem; bottom: .45rem; z-index: 4; font-size: .62rem; color: var(--stone); background: rgba(251,248,243,.8); padding: .1rem .4rem; }

/* Vector layers */
.m-bg { fill: #efe8dc; }
.m-park { fill: #dfe0cb; stroke: none; opacity: .75; }
.m-water { fill: #c9d6d6; stroke: none; }
.m-river { fill: none; stroke: #c9d6d6; stroke-width: 2; }
.m-rail { fill: none; stroke: #b4a898; stroke-width: 1.2; stroke-dasharray: 5 4; }
.m-minor { fill: none; stroke: #fbf8f3; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: opacity .6s; }
.m-tertiary { fill: none; stroke: #fdfbf7; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.m-link { fill: none; stroke: #d7c7b1; stroke-width: 1.8; stroke-linecap: round; }
.m-secondary { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.m-primary { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.m-trunk { fill: none; stroke: #e3d4bf; stroke-width: 4; stroke-linecap: round; }
.m-motorway { fill: none; stroke: #cbb697; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.m-route59-glow { fill: none; stroke: rgba(168, 131, 79, .22); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.m-route59 { fill: none; stroke: var(--brass); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.is-region .m-minor { opacity: 0; }
.is-region .m-tertiary { opacity: .6; }
.is-region .m-route59-glow { stroke-width: 10; }
.m-ring { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 5; opacity: .35; transition: opacity .6s; }
.is-region .m-ring--near, .locmap:not(.is-region) .m-ring--region { opacity: 0; }
.m-route-casing { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.m-route { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-in-out) .35s; }
.m-route.is-drawn { stroke-dashoffset: 0; }
.m-route--straight { stroke-dasharray: 1; }

/* Overlay */
.locmap__overlay { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.locmap__overlay > * { position: absolute; left: 0; top: 0; pointer-events: auto; will-change: transform; transition: opacity .45s var(--ease-out); }
.locmap__overlay > .is-hidden { opacity: 0; pointer-events: none; }
.m-place { font-size: .62rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #8b8074; white-space: nowrap; margin: -.5em 0 0 0; translate: -50% 0; pointer-events: none; text-shadow: 0 0 6px #efe8dc, 0 0 2px #efe8dc; }
.m-place--major { font-size: .72rem; color: #6b6158; }
.m-shield { pointer-events: none; font-size: .62rem; font-weight: 700; letter-spacing: .04em; line-height: 1; padding: .3rem .4rem; min-width: 1.6rem; text-align: center; translate: -50% -50%; border-radius: 3px; background: #fff; color: var(--ink); border: 1px solid var(--ink); white-space: nowrap; }
.m-shield--i { background: #2f4a6b; color: #fff; border-color: #2f4a6b; border-radius: 3px 3px 9px 9px; }
.m-shield--us { border-radius: 3px 3px 8px 8px; }
.m-shield--pkwy { background: #3f5c45; color: #fff; border-color: #3f5c45; }
.m-shield--nj { border-radius: 50%; min-width: 1.7rem; }
.m-ringlabel { pointer-events: none; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); translate: -50% -50%; background: #efe8dc; padding: 0 .3rem; }
.m-pin { width: 1.55rem; height: 1.55rem; margin: -.775rem 0 0 -.775rem; border-radius: 50%; background: var(--c); color: #fff; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(30,20,10,.28); display: grid; place-items: center; font-size: .6rem; font-weight: 700; cursor: pointer; transition: opacity .45s var(--ease-out), scale .35s var(--ease-out), box-shadow .35s; z-index: 2; }
.m-pin span { pointer-events: none; }
.m-pin.is-hover, .m-pin:hover, .m-pin:focus-visible { scale: 1.3; z-index: 3; box-shadow: 0 0 0 5px rgba(255,255,255,.7), 0 4px 14px rgba(30,20,10,.3); }
.m-pin.is-active { scale: 1.45; z-index: 4; box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 30%, transparent), 0 4px 14px rgba(30,20,10,.3); }
.m-site { pointer-events: none; z-index: 5; }
.m-site__dot { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); border: 3px solid #fff; box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.m-site__pulse { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--brass); animation: site-pulse 2.8s var(--ease-out) infinite; }
@keyframes site-pulse { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.m-site__card { position: absolute; left: 18px; top: -58px; background: var(--ink); color: #fff; padding: .55rem .85rem; white-space: nowrap; display: grid; line-height: 1.25; box-shadow: 0 10px 30px -10px rgba(0,0,0,.4); }
.m-site__card::after { content: ""; position: absolute; left: -1px; bottom: -8px; border-left: 8px solid var(--ink); border-bottom: 8px solid transparent; }
.m-site__card strong { font-family: var(--f-display); font-weight: 400; font-size: 1.05rem; }
.m-site__card em { font-style: normal; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--blush); }

/* Detail card */
.locmap__tip { position: absolute; z-index: 6; left: 1rem; bottom: 1rem; width: min(20rem, calc(100% - 2rem)); background: var(--ivory); border: 1px solid var(--line); box-shadow: 0 20px 50px -20px rgba(40,25,10,.35); padding: 1.2rem 1.3rem 1rem; display: grid; gap: .45rem; animation: tip-in .6s var(--ease-out); }
@keyframes tip-in { from { opacity: 0; transform: translateY(12px); } }
.locmap__tip-close { position: absolute; right: .5rem; top: .35rem; width: 2rem; height: 2rem; font-size: 1.4rem; line-height: 1; color: var(--stone); }
.locmap__tip-name { font-family: var(--f-display); font-weight: 400; font-size: 1.55rem; line-height: 1.1; color: var(--ink); padding-right: 1.5rem; }
.locmap__tip-time { font-size: .85rem; color: var(--stone); }
.locmap__tip-time b { font-family: var(--f-display); font-weight: 400; font-size: 1.6rem; color: var(--ink); }
.locmap__tip-time i { font-style: normal; margin: 0 .2rem; }
.locmap__tip-note { font-size: .85rem; line-height: 1.5; }
.locmap__tip .link-arrow { justify-self: start; margin-top: .3rem; font-size: .66rem; }

@media (max-width: 900px) {
  .locmap { grid-template-columns: 1fr; grid-template-rows: auto; }
  .locmap__bar { flex-direction: column; align-items: stretch; }
  .locmap__scale { align-self: flex-start; }
  .locmap__stage { order: 1; }
  .locmap__panel { order: 2; border-right: 0; border-top: 1px solid var(--line); max-height: 26rem; }
  .locmap__canvas { min-height: 24rem; }
}

/* Aerial band */
.location__marquee { margin-top: clamp(5rem, 9vw, 8rem); }
.location__aerial { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2.2vw, 2.25rem); margin-top: clamp(4rem, 8vw, 7rem); align-items: center; }
.location__aerial-fig { grid-column: 1 / span 7; }
.location__aerial-fig .media { aspect-ratio: 4 / 3; }
.location__aerial-text { grid-column: 9 / span 4; }
@media (max-width: 900px) {
  .location__aerial-fig, .location__aerial-text { grid-column: 1 / -1; }
  .location__aerial-text { margin-top: 2.5rem; }
}
/* grid/flex children must be allowed to shrink below their content (the chip row scrolls instead) */
.locmap > *, .locmap__bar > *, .locmap__filters { min-width: 0; }
@media (max-width: 900px) { .locmap { grid-template-columns: minmax(0, 1fr); } }