.destinations-intro { display: grid; grid-template-columns: 1.3fr .7fr; align-items: end; gap: 2rem; }
.destinations-hero { color: var(--white); background: var(--teal); }
.destinations-hero-inner { min-height: 24rem; display: grid; grid-template-columns: 1fr .8fr; align-items: center; gap: clamp(2rem, 6vw, 6rem); padding-block: 3.5rem; }
.destinations-hero-copy .eyebrow { color: var(--yellow); }
.destinations-hero-copy h1 { max-width: 13ch; margin-bottom: 1rem; color: var(--white); font-family: var(--sans); font-size: clamp(2.8rem, 5vw, 5rem); font-weight: 850; letter-spacing: -.05em; text-transform: uppercase; }
.destinations-hero-copy .lead { margin-bottom: 1.5rem; color: #e0eeee; }
.destinations-hero-image { --photo-fallback: #1b7c87; min-height: 18rem; border: .5rem solid var(--white); transform: rotate(-1.5deg); }
.destinations-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.destinations-strip span { padding: 1rem; border-right: 1px solid var(--line); color: var(--navy); font-size: .76rem; font-weight: 750; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.destinations-strip span:last-child { border-right: 0; }
.destinations-intro h1 { margin-bottom: 0; }
.destination-grid { grid-template-columns: repeat(4, 1fr); }
.destination-card:nth-child(4n + 2) { margin-top: 2.5rem; }
.destination-card:nth-child(4n + 4) { margin-top: 1.25rem; }
.destination-card .photo-frame { min-height: 14rem; }
.region-note { padding: 1.5rem; border: 1px solid var(--line); background: #f0eee6; }
@media (max-width: 900px) { .destination-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  .destinations-hero-inner { grid-template-columns: 1fr; padding-block: 2.5rem; }
  .destinations-hero-image { min-height: 15rem; }
  .destinations-strip { grid-template-columns: repeat(2, 1fr); }
  .destinations-strip span:nth-child(2) { border-right: 0; }
  .destinations-strip span:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .destinations-intro { grid-template-columns: 1fr; }
  .destination-card:nth-child(n) { margin-top: 0; }
}
@media (max-width: 520px) { .destination-grid { grid-template-columns: 1fr; } }
body[data-page="destinations"] .destination-card .photo-frame::before { transition: filter .35s ease, transform .65s cubic-bezier(.2,.7,.2,1); }
body[data-page="destinations"] .destination-card:hover .photo-frame::before,
body[data-page="destinations"] .destination-card:focus-within .photo-frame::before { filter: saturate(1.16) contrast(1.03); }
body[data-page="destinations"] .destination-card .card-body h3 { transition: letter-spacing .2s ease, color .2s ease; }
body[data-page="destinations"] .destination-card:hover .card-body h3,
body[data-page="destinations"] .destination-card:focus-within .card-body h3 { color: var(--teal); letter-spacing: .01em; }
body[data-page="destinations"] .destination-card .photo-caption { transition: transform .22s ease, opacity .22s ease; }
body[data-page="destinations"] .destination-card:hover .photo-caption,
body[data-page="destinations"] .destination-card:focus-within .photo-caption { transform: translateY(-4px); }
body[data-page="destinations"] .destinations-strip span { position: relative; transition: color .18s ease, background-color .18s ease; }
body[data-page="destinations"] .destinations-strip span::after { position: absolute; right: 25%; bottom: .45rem; left: 25%; height: 2px; background: var(--yellow); content: ""; transform: scaleX(0); transition: transform .2s ease; }
body[data-page="destinations"] .destinations-strip span:hover { color: var(--teal); background: #f4f1e8; }
body[data-page="destinations"] .destinations-strip span:hover::after { transform: scaleX(1); }
body[data-page="destinations"] .region-note { border-left: 3px solid transparent; transition: border-color .2s ease, padding-left .2s ease; }
body[data-page="destinations"] .region-note:hover { padding-left: 1.8rem; border-left-color: var(--yellow); }
body[data-page="destinations"] .region-note .text-link:hover { color: var(--teal); letter-spacing: .015em; }
@media (prefers-reduced-motion: reduce) { body[data-page="destinations"] .region-note:hover { padding-left: 1.5rem; } }
.route-planner-section { padding-block: clamp(3rem, 6vw, 5rem); color: var(--white); background: #10233b; }
.route-planner-heading { margin-bottom: 1.5rem; }
.route-planner-heading .eyebrow { color: var(--yellow); }
.route-planner-heading h2 { margin-bottom: .5rem; color: var(--white); font-family: var(--sans); font-size: clamp(1.8rem, 3.5vw, 2.7rem); font-weight: 800; letter-spacing: -.04em; }
.route-planner-heading p { max-width: 46rem; margin-bottom: 0; color: #d3dee9; }
.route-planner { min-height: 26rem; display: grid; grid-template-columns: minmax(18rem, .78fr) 1.22fr; overflow: hidden; border: 1px solid rgb(255 255 255 / 15%); border-radius: 1rem; color: var(--ink); background: var(--white); }
.route-controls { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.4rem, 3vw, 2.1rem); }
.route-controls h3 { margin-bottom: .6rem; color: var(--navy); font-family: var(--sans); font-size: 1.5rem; font-weight: 750; letter-spacing: -.035em; }
.route-controls > p:not(.route-status):not(.route-disclaimer) { margin-bottom: 1rem; font-size: .82rem; }
.route-controls label { margin: .15rem 0 .35rem; color: var(--ink); font-size: .76rem; font-weight: 700; }
.route-controls select { width: 100%; min-height: 2.85rem; margin-bottom: .65rem; padding: .6rem .75rem; border: 1px solid #cbd6dc; border-radius: .35rem; color: var(--ink); background: var(--white); font-size: .85rem; }
.route-controls select:focus-visible { outline-color: var(--teal); }
.route-submit { min-height: 2.9rem; margin-top: .2rem; border-color: var(--navy); border-radius: .4rem; color: var(--white); background: var(--navy); cursor: pointer; }
.route-submit:hover { background: var(--navy-light); }
.route-submit:disabled { cursor: wait; opacity: .7; }
.route-status { min-height: 1.5rem; margin: .75rem 0 .5rem; color: var(--green-dark); font-size: .78rem; }
.route-status[data-state="error"] { color: #a63222; }
.route-disclaimer { margin: auto 0 0; padding-top: .8rem; color: var(--muted); font-size: .69rem; line-height: 1.55; }
.route-map-wrap { position: relative; min-height: 26rem; background: #eef1f4; }
.route-map { position: absolute; inset: 0; z-index: 0; }
.route-map-placeholder { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; padding: 2rem; color: var(--navy); background: #f2f4f6; text-align: center; pointer-events: none; transition: opacity .25s ease; }
.route-map-placeholder[hidden] { display: none; }
.route-map-placeholder strong { font-size: .95rem; }
.route-map-placeholder > span:last-child { max-width: 17rem; color: var(--muted); font-size: .73rem; }
.route-map-icon { width: 2.7rem; height: 2.7rem; display: grid; place-items: center; margin-bottom: .2rem; border: 1px solid #dce3e5; border-radius: 50%; color: var(--navy); background: var(--white); font-size: 1.2rem; }
.route-attribution { margin: .7rem 0 0; color: #d3dee9; font-size: .7rem; text-align: right; }
.route-attribution a { color: var(--white); text-underline-offset: .15em; }
.leaflet-container { z-index: 0; font: inherit; }
.leaflet-control-attribution { font-size: .65rem !important; }
@media (max-width: 760px) {
  .route-planner { grid-template-columns: 1fr; }
  .route-map-wrap { min-height: 20rem; }
  .route-map { min-height: 20rem; }
}
@media (prefers-reduced-motion: reduce) { .route-map-placeholder { transition: none; } }

/* Match the generated destination images without fixed-height crops. */
.destinations-hero-image { width: 100%; min-width: 0; min-height: 0; aspect-ratio: 4 / 3; }
.destination-grid .destination-card .photo-frame { min-height: 0; aspect-ratio: 5 / 4; }
.route-stops { width: 100%; }
.route-stop-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .5rem; align-items: start; margin-bottom: .5rem; }
.route-stop-row label { grid-column: 1 / -1; }
.route-stop-row select { min-width: 0; margin-bottom: 0; }
.route-remove-stop { min-height: 2.85rem; padding: .4rem .55rem; border: 1px solid #cbd6dc; border-radius: .35rem; color: #a63222; background: white; font-size: .72rem; cursor: pointer; }
.route-add-stop { min-height: 2.5rem; padding: .4rem .8rem; border: 1px solid var(--teal); border-radius: .35rem; color: var(--teal); background: white; font-size: .8rem; cursor: pointer; }
.route-add-stop:disabled { opacity: .5; cursor: default; }
.route-controls .route-stop-hint { margin: .35rem 0 .7rem; font-size: .7rem; color: var(--muted); }
.route-numbered-marker span { display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid white; border-radius: 50%; background: #062b42; color: #fff; font: 700 13px Arial,sans-serif; box-shadow: 0 2px 8px #0005; }